Untitled
unknown
plain_text
a year ago
8.8 kB
3
Indexable
'use client'; import TabItem from '@/components/Global/TabItem'; import TabPanel from '@/components/Global/TabPanel'; import { convertTimestampToFormattedDate } from '@/lib/helpers/convertTimestampToFormattedDate'; import { getCurrentGoals } from '@/lib/helpers/getCurrentGoals'; import getSlugify from '@/lib/helpers/getSlugify'; import Image from 'next/image'; import Link from 'next/link'; import { useState } from 'react'; import { CiYoutube } from 'react-icons/ci'; import { FaFacebookF } from 'react-icons/fa'; import { HiOutlineVideoCamera } from 'react-icons/hi'; import { IoLogoInstagram } from 'react-icons/io5'; import MatchHead2Head from './MatchHead2Head'; import MatchLineup from './MatchLineup'; import MatchPreview from './MatchPreview'; import MatchStandings from './MatchStandings'; import MatchStats from './MatchStats'; import MatchSummary2 from './MatchSummary2'; export default function MatchDetails({ status, matchData }) { console.log(matchData); const [currentTab, setCurrentTab] = useState(0); const liveStatus = [ 'INPLAY_1ST_HALF', 'INPLAY_2ND_HALF', 'HT', 'INPLAY_ET', 'INPLAY_ET_2ND_HALF', 'BREAK', 'PEN_BREAK', 'EXTRA_TIME_BREAK', 'INPLAY_PENALTIES', ]; const finishedStatus = ['FT', 'AET', 'FT_PEN']; const upcomingStatus = [ 'TBA', 'NS', 'WO', 'ABANDONED', 'CANCELLED', 'AWARDED', 'INTERRUPTED', 'POSTPONED', ]; const matchState = matchData.state?.state; const isLive = liveStatus.includes(matchState); const isUpcoming = upcomingStatus.includes(matchState); const isFinished = finishedStatus.includes(matchState); const { tOne, tTwo } = getCurrentGoals(matchData?.scores); const formattedDate = convertTimestampToFormattedDate( matchData?.starting_at_timestamp ); const goalFormate = `${tOne}-${tTwo}`; const homeTeam = matchData?.participants?.find( (team) => team.meta.location === 'home' ); const awayTeam = matchData?.participants?.find( (team) => team.meta.location === 'away' ); const tabs = status === 'preview' ? ['Preview', 'Standings', 'Head-2-Head'] : ['Info', 'Summary', 'Stats', 'Line-up', 'Standings', 'Head-2-Head']; const tabContents = status === 'preview' ? [ <MatchPreview key={'match_details_tab_01'} matchData={matchData} />, <MatchStandings key={'match_details_tab_02'} matchData={matchData} />, <MatchHead2Head key={'match_details_tab_03'} matchData={matchData} />, ] : [ <MatchPreview key={'match_details_tab_04'} matchData={matchData} />, <MatchSummary2 key={'match_details_tab_05'} matchData={matchData} totalGoal={goalFormate} />, <MatchStats key={'match_details_tab_06'} matchData={matchData} />, <MatchLineup key={'match_details_tab_07'} matchData={matchData} />, <MatchStandings key={'match_details_tab_08'} matchData={matchData} />, <MatchHead2Head key={'match_details_tab_09'} matchData={matchData} />, ]; const handleTabChange = (tab) => { setCurrentTab(tab); }; return ( <div className="max-w-screen-xl mx-auto"> <div className="flex flex-col items-start justify-between "> <div className="bg-[#1B2435] w-full "> <div className="h-full p-2 lg:p-4"> <div className="grid grid-cols-3 justify-items-center"> <div></div> <h2 className="text-gray-500 text-center text-xl py-4 "> {matchData?.league?.name} </h2> <div className="flex items-center justify-end gap-2 px-1 justify-self-end"> <HiOutlineVideoCamera className="text-2xl " /> <div> <Image src="/icons/star_black.png" alt="Star logo" width={20} height={20} /> </div> </div> </div> <div className="flex items-center justify-between w-full"> <div className="grid grid-cols-9 items-center justify-center w-full"> <div className=""></div> <div></div> <Link href={`/team/${getSlugify(homeTeam.name)}/${homeTeam?.id}`} className="flex items-center justify-end col-span-2" > <h4 className="text-white font-semibold uppercase mx-4"> {homeTeam?.name} </h4> <Image src={homeTeam?.image_path} alt={homeTeam?.name} height={0} width={0} sizes="100vw" className="w-8 h-8 8 rounded-full" /> </Link> <div className="h-20 w-20 rounded-full bg-[#061626] mx-auto flex items-center justify-center text-sm"> {isLive && ( <div className="relative flex flex-col items-center text-white"> <span>{matchData?.periods?.slice(-1)[0]?.minutes}</span> <span className="absolute -top-2 -right-1 text-secondary animate-pulse text-xl"> {`"`} </span> <span className="font-semibold">{goalFormate}</span> </div> )} {isFinished && ( <span className="font-semibold text-base"> {goalFormate} </span> )} {isUpcoming && ( <div className="text-center"> <span className="font-semibold">{formattedDate}</span> </div> )} </div> <Link href={`/team/${getSlugify(awayTeam.name)}/${awayTeam?.id}`} className="flex items-center col-span-2" > <Image src={awayTeam?.image_path} alt={awayTeam?.name} height={0} width={0} sizes="100vw" className="w-8 h-8 mr-4 rounded-full " /> <h4 className="text-white font-semibold uppercase"> {awayTeam?.name} </h4> </Link> <div></div> </div> </div> <h2 className="text-gray-500 text-center text-xl py-4">84"</h2> </div> </div> </div> <div className="flex items-center justify-between py-2"> <div className="flex items-start justify-start gap-5 mt-3 text-gray-500 font-normal"> {tabs.map((tab, index) => ( <TabItem key={index} tab={tab} onClick={() => handleTabChange(index)} active={currentTab === index} isWhite={false} /> ))} </div> <div className="flex justify-end gap-4 pe-3"> <Link href="/" className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white hover:text-secondary" > <FaFacebookF className="text-sm" /> </Link> <Link href="/" className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white hover:text-secondary" > <IoLogoInstagram className="text-base" /> </Link> <Link href="/" className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white hover:text-secondary" > <CiYoutube className="text-base" /> </Link> <Link href="/" className="w-6 h-6 rounded-full flex justify-center items-center ring-1 ring-blue-500 text-white hover:text-secondary" > <CiYoutube className="text-base" /> </Link> </div> </div> <div className="h-auto w-full"> <div className=""> {tabContents.map((content, index) => ( <TabPanel key={index} content={content} index={index} currentTab={currentTab} /> ))} </div> </div> </div> ); }
Editor is loading...
Leave a Comment