Untitled

import React from "react";
import { FaUserFriends } from "react-icons/fa";
import { FiFlag } from "react-icons/fi";


const Home = () => {
  return (
    <>
      <div className="w-3/4 h-2/4 text-gray-700 bg-white p-4 rounded-lg shadow-md">
        <div className="space-y-5 p-4">
          <p className="flex space-x-5 text-xl font-bold mt-1">
            Recent (Global)
          </p>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end mt-1">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
        </div>
        <div className="space-y-5 p-4">
          <p className="flex space-x-5 text-gray-700 text-xl font-bold mt-1">
            Plying Now (Based on user preferences)
          </p>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end mt-1">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
          <div className="card w-full bg-base-100 shadow-xl">
            <div className="card-body bg-white text-black w-10/15 p-3">
              <p className="card-title ">
                [username] wants to play [game name]
              </p>
              <div className="space-x-3 flex mt-1">
                <FaUserFriends className="text-3xl" />
                <p className="font-bold mt-1">3/5</p>
                <FiFlag className="text-2xl mt-1"></FiFlag>
                <p className="font-bold mt-1">[Available roles]</p>
              </div>
              <div className="card-actions justify-end">
                <button className="btn btn-primary">Decline</button>
                <button className="btn btn-primary">Join</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;