Untitled
unknown
plain_text
a year ago
8.1 kB
4
Indexable
import getShortName from '@/lib/helpers/getShortName'; import getSlugify from '@/lib/helpers/getSlugify'; import Image from 'next/image'; import Link from 'next/link'; import BetDroopDown from './BetDroopDown'; import MatchScore from './MatchScore'; import MatchStates2 from './MatchStates2'; import Probability from './Probability'; const MatchCard2 = ({ match, large }) => { // const { data: session } = useSession(); // const [isStarClicked, setIsStarClicked] = useState(false); // const isFavorite = false; const upcomingStatus = [ 'TBA', 'NS', 'WO', 'ABANDONED', 'CANCELLED', 'AWARDED', 'INTERRUPTED', 'POSTPONED', ]; const isPreviewPage = upcomingStatus.includes(match?.state?.short_name); // const handleFavoriteClick = async (event, match) => { // event.preventDefault(); // if (session) { // const favoriteData = { // email: session.user?.email, // key: 'matches', // item: match, // }; // try { // const { data } = await xoomBackendUrl.put( // '/api/user/favorites', // favoriteData // ); // if (data.status) { // setIsStarClicked(!isStarClicked); // toast.success('Match added to favorites'); // } else { // toast.error('Error'); // } // } catch (error) { // console.error('Error while adding to favorites:', error); // toast.error('An error occurred'); // } // } else { // toast.error('Please login first'); // } // }; // const handleRemoveFavorite = async (event, match) => { // event.preventDefault(); // if (session) { // const favoriteData = { // email: session.user?.email, // key: 'matches', // item: match, // }; // try { // const { data } = await xoomBackendUrl.put( // '/api/user/favorites/remove', // favoriteData // ); // if (data.status) { // setIsStarClicked(!isStarClicked); // toast.success('Match removed from favorites'); // } else { // toast.error('Error'); // } // } catch (error) { // console.error('Error while removing from favorites:', error); // toast.error('An error occurred'); // } // } else { // toast.error('Please login first'); // } // }; const teamByLocation = (location) => match?.participants?.find((team) => team?.meta?.location === location); return ( <div className="relative "> <Link className={ large ? 'bg-[#1B2435] grid grid-cols-10 content-center gap-4 my-4 h-16 text-lg ' : 'bg-[#1B2435] grid grid-cols-10 content-center gap-4 my-2 text-xs' } href={`/match/${isPreviewPage ? 'preview' : 'details'}/${getSlugify( teamByLocation('home')?.name )}-vs-${getSlugify(teamByLocation('away')?.name)}/${match?.id}`} > <MatchScore match={match} /> <div className="py-1 col-span-4 flex items-center"> <div> <div className="flex justify-between text-gray-400 pb-2"> <div className="flex gap-2 items-center "> <div> <Image src={teamByLocation('home')?.image_path} alt="team one" height={0} width={0} sizes="100vw" className={large ? 'w-6 h-6' : 'w-4 h-4'} /> </div> <h2> {getShortName( teamByLocation('home')?.name, teamByLocation('home')?.short_code )} </h2> </div> </div> <div className="flex justify-between text-gray-400 "> <div className="flex gap-2 items-center "> <div> <Image src={teamByLocation('away')?.image_path} alt="team two" height={0} width={0} sizes="100vw" className={large ? 'w-6 h-6' : 'w-4 h-4'} /> </div> <h2> {getShortName( teamByLocation('away')?.name, teamByLocation('away')?.short_code )} </h2> </div> </div> </div> </div> {/* goal section */} <MatchStates2 match={match} large={true} /> </Link> {/* analytic & highlight */} <div className={ large ? 'my-auto flex gap-6 item-center absolute right-[14.5rem] top-[20px]' : 'my-auto flex gap-4 item-center absolute right-[12.5rem] top-[15px]' } > <div className="dropdown dropdown-hover my-auto dropdown-end "> <div role="button" className=""> <Image src="/images/Group 190.png" alt="team two" height={0} width={0} sizes="100vw" className="w-4 h-4 " /> <div tabIndex={0} className="dropdown-content menu w-[640px] !right-[-240px] absolute z-[10]" > <div className="mt-5 bg-[#1B2435] shadow-xl shadow-blue-500/50 rounded-md relative"> <div className="bg-[#1B2435] w-2 h-2 ms-[24rem] rotate-45 absolute -mt-1 z-20 "></div> <Probability /> </div> </div> </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={ large ? 'col-span-2 p-2 bg-[#122948] mx-auto dropdown dropdown-hover my-auto dropdown-end absolute right-[3.5rem] top-[0px]' : 'col-span-2 p-2 bg-[#122948] mx-auto dropdown dropdown-hover my-auto dropdown-end absolute right-[3.5rem] top-[0px] text-xs' } > <div role="button"> <div className=" grid grid-cols-3 gap-4 text-gray-500 my-auto h-full"> <div className="grid grid-cols content-between h-full"> <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 tabIndex={1} className="dropdown-content z-[1] menu w-[635px] !right-[-60px]" > <div className=" mt-5 bg-[#1B2435] shadow-xl shadow-blue-500/50 rounded-none relative"> <div className="bg-[#1B2435] w-2 h-2 ms-[33.2rem] border-none p-0 m-0 rotate-45 absolute -mt-1"></div> <BetDroopDown /> </div> </div> </div> </div> {/* favorite section */} <div className={ large ? 'my-auto mx-auto absolute right-5 top-5' : 'my-auto mx-auto absolute right-5 top-3' } > <div> <Image src="/icons/star_black.png" alt="Star logo" width={20} height={20} /> </div> </div> </div> ); }; export default MatchCard2;
Editor is loading...
Leave a Comment