Untitled
unknown
plain_text
2 years ago
19 kB
4
Indexable
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>
);
}
Editor is loading...
Leave a Comment