Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
19 kB
1
Indexable
Never
import Image from 'next/image';
import Link from 'next/link';

export default function FixtureList2() {
  return (
    <div className="rounded-2xl border border-blue-400 my-5">
      <div>
        {/* card section */}
        <div>
          {/* card title */}
          <div className="flex justify-between items-center p-3">
            <div className="flex items-center gap-3 ">
              <div>
                <Image
                  src="/images/earth-americas.png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-6 h-6 rounded-full"
                />
              </div>
              <div className="text-white text-sm ">
                <h2>Premier League</h2>
                <p>Country</p>
              </div>
            </div>
            <div>
              <Link href="/">
                <Image
                  src="/images/down (1).png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-4 h-4"
                />
              </Link>
            </div>
          </div>
          {/* card body  */}
          <div className=" bg-[#1B2435] grid grid-cols-8 content-center gap-4 my-2">
            <div className="flex justify-center items-center col-span-1">
              <h2 className="text-blue-800">FT</h2>
            </div>
            <div className="py-1 col-span-2 flex items-center">
              <div>
                <div className="flex justify-between text-gray-400 pb-2">
                  <div className="flex gap-2 items-center ">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
                <div className="flex justify-between text-gray-400">
                  <div className="flex gap-2 items-center">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
              </div>
            </div>
            {/* goal section  */}
            <div className="my-auto text-gray-400">
              <div className="pb-1">
                <h2>2</h2>
              </div>
              <div>
                <h2>2</h2>
              </div>
            </div>
            {/* analytic & highlight */}
            <div className="my-auto flex gap-4  item-center">
              <div className="dropdown dropdown-hover my-auto dropdown-end">
                <div tabIndex={0} role="button" className="">
                  <Image
                    src="/images/Group 190.png"
                    alt="team two"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-4 h-4 "
                  />
                  <ul
                    tabIndex={0}
                    className="dropdown-content z-[1] menu  shadow bg-base-100 rounded-none !mt-[5px] w-[500px] !right-[-127px]"
                  >
                    <li>
                      <a>Item 1</a>
                    </li>
                    <li>
                      <a>Item 2</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div>
                <Image
                  src="/images/Group 199.png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-5 h-4"
                />
              </div>
            </div>
            {/* brief details  */}
            <div className="col-span-2 p-3 bg-[#122948]">
              <div className="  grid grid-cols-3 gap-4 text-gray-500 text-xs my-auto h-full">
                <div className="grid grid-cols content-between">
                  <h2>324</h2>
                  <h2 className="text-green-700">324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
              </div>
            </div>
            {/* favorite section  */}
            <div className="my-auto mx-auto  ">
              <button>
                <Image
                  src="/icons/star_black.png"
                  alt="Star logo"
                  width={20}
                  height={20}
                />
              </button>
            </div>
          </div>
          <div className=" bg-[#1B2435] grid grid-cols-8 content-center gap-4 my-2">
            <div className="flex justify-center items-center col-span-1">
              <h2 className="text-blue-800">FT</h2>
            </div>
            <div className="py-1 col-span-2 flex items-center">
              <div>
                <div className="flex justify-between text-gray-400 pb-2">
                  <div className="flex gap-2 items-center ">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
                <div className="flex justify-between text-gray-400">
                  <div className="flex gap-2 items-center">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
              </div>
            </div>
            {/* goal section  */}
            <div className="my-auto text-gray-400">
              <div className="pb-1">
                <h2>2</h2>
              </div>
              <div>
                <h2>2</h2>
              </div>
            </div>
            {/* analytic & highlight */}
            <div className="my-auto flex gap-4  item-center">
              <div className="dropdown dropdown-hover my-auto dropdown-end">
                <div tabIndex={0} role="button" className="">
                  <Image
                    src="/images/Group 190.png"
                    alt="team two"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-4 h-4 "
                  />
                  <ul
                    tabIndex={0}
                    className="dropdown-content z-[1] menu  shadow bg-base-100 rounded-none !mt-[5px] w-[500px] !right-[-127px]"
                  >
                    <li>
                      <a>Item 1</a>
                    </li>
                    <li>
                      <a>Item 2</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div>
                <Image
                  src="/images/Group 199.png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-5 h-4"
                />
              </div>
            </div>
            {/* brief details  */}
            <div className="col-span-2 p-3 bg-[#122948]">
              <div className="  grid grid-cols-3 gap-4 text-gray-500 text-xs my-auto h-full">
                <div className="grid grid-cols content-between">
                  <h2>324</h2>
                  <h2 className="text-green-700">324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
              </div>
            </div>
            {/* favorite section  */}
            <div className="my-auto mx-auto  ">
              <button>
                <Image
                  src="/icons/star_black.png"
                  alt="Star logo"
                  width={20}
                  height={20}
                />
              </button>
            </div>
          </div>
        </div>
        <div>
          {/* card title */}
          <div className="flex justify-between items-center p-3">
            <div className="flex items-center gap-3 ">
              <div>
                <Image
                  src="/images/earth-americas.png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-6 h-6 rounded-full"
                />
              </div>
              <div className="text-white text-sm ">
                <h2>Premier League</h2>
                <p>Country</p>
              </div>
            </div>
            <div>
              <Link href="/">
                <Image
                  src="/images/down (1).png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-4 h-4"
                />
              </Link>
            </div>
          </div>
          {/* card body  */}
          <div className=" bg-[#1B2435] grid grid-cols-8 content-center gap-4 my-2">
            <div className="flex justify-center items-center col-span-1">
              <h2 className="text-blue-800">FT</h2>
            </div>
            <div className="py-1 col-span-2 flex items-center">
              <div>
                <div className="flex justify-between text-gray-400 pb-2">
                  <div className="flex gap-2 items-center ">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
                <div className="flex justify-between text-gray-400">
                  <div className="flex gap-2 items-center">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
              </div>
            </div>
            {/* goal section  */}
            <div className="my-auto text-gray-400">
              <div className="pb-1">
                <h2>2</h2>
              </div>
              <div>
                <h2>2</h2>
              </div>
            </div>
            {/* analytic & highlight */}
            <div className="my-auto flex gap-4  item-center">
              <div className="dropdown dropdown-hover my-auto dropdown-end">
                <div tabIndex={0} role="button" className="">
                  <Image
                    src="/images/Group 190.png"
                    alt="team two"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-4 h-4 "
                  />
                  <ul
                    tabIndex={0}
                    className="dropdown-content z-[1] menu  shadow bg-base-100 rounded-none !mt-[5px] w-[500px] !right-[-127px]"
                  >
                    <li>
                      <a>Item 1</a>
                    </li>
                    <li>
                      <a>Item 2</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div>
                <Image
                  src="/images/Group 199.png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-5 h-4"
                />
              </div>
            </div>
            {/* brief details  */}
            <div className="col-span-2 p-3 bg-[#122948]">
              <div className="  grid grid-cols-3 gap-4 text-gray-500 text-xs my-auto h-full">
                <div className="grid grid-cols content-between">
                  <h2>324</h2>
                  <h2 className="text-green-700">324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
              </div>
            </div>
            {/* favorite section  */}
            <div className="my-auto mx-auto  ">
              <button>
                <Image
                  src="/icons/star_black.png"
                  alt="Star logo"
                  width={20}
                  height={20}
                />
              </button>
            </div>
          </div>
          <div className=" bg-[#1B2435] grid grid-cols-8 content-center gap-4 my-2">
            <div className="flex justify-center items-center col-span-1">
              <h2 className="text-blue-800">FT</h2>
            </div>
            <div className="py-1 col-span-2 flex items-center">
              <div>
                <div className="flex justify-between text-gray-400 pb-2">
                  <div className="flex gap-2 items-center ">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
                <div className="flex justify-between text-gray-400">
                  <div className="flex gap-2 items-center">
                    <div>
                      <Image
                        src="/images/earth-americas.png"
                        alt="team two"
                        height={0}
                        width={0}
                        sizes="100vw"
                        className="w-4 h-4"
                      />
                    </div>
                    <h2>Portugal</h2>
                  </div>
                </div>
              </div>
            </div>
            {/* goal section  */}
            <div className="my-auto text-gray-400">
              <div className="pb-1">
                <h2>2</h2>
              </div>
              <div>
                <h2>2</h2>
              </div>
            </div>
            {/* analytic & highlight */}
            <div className="my-auto flex gap-4  item-center">
              <div className="dropdown dropdown-hover my-auto dropdown-end">
                <div tabIndex={0} role="button" className="">
                  <Image
                    src="/images/Group 190.png"
                    alt="team two"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-4 h-4 "
                  />
                  <ul
                    tabIndex={0}
                    className="dropdown-content z-[1] menu  shadow bg-base-100 rounded-none !mt-[5px] w-[500px] !right-[-127px]"
                  >
                    <li>
                      <a>Item 1</a>
                    </li>
                    <li>
                      <a>Item 2</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div>
                <Image
                  src="/images/Group 199.png"
                  alt="team two"
                  height={0}
                  width={0}
                  sizes="100vw"
                  className="w-5 h-4"
                />
              </div>
            </div>
            {/* brief details  */}
            <div className="col-span-2 p-3 bg-[#122948]">
              <div className="  grid grid-cols-3 gap-4 text-gray-500 text-xs my-auto h-full">
                <div className="grid grid-cols content-between">
                  <h2>324</h2>
                  <h2 className="text-green-700">324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
                <div className="grid grid-cols content-between">
                  <h2 className="text-red-700">324</h2>
                  <h2>324</h2>
                </div>
              </div>
            </div>
            {/* favorite section  */}
            <div className="my-auto mx-auto  ">
              <button>
                <Image
                  src="/icons/star_black.png"
                  alt="Star logo"
                  width={20}
                  height={20}
                />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Leave a Comment