Untitled
unknown
plain_text
2 months ago
4.8 kB
3
Indexable
import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Timer, AlertCircle } from "lucide-react"; export default function TunisianLeagueScoreboard() { const [score, setScore] = useState({ est: 0, ca: 0 }); const [extraTime, setExtraTime] = useState(null); const [redCard, setRedCard] = useState(null); return ( <div className="flex flex-col items-center bg-red-900 p-4 text-white rounded-xl w-full max-w-lg"> <h1 className="text-2xl font-bold mb-4">Tunisian Professional League Scoreboard</h1> <Card className="w-full text-center p-4 bg-white text-black border-red-900 border-2 rounded-lg"> <CardContent className="flex justify-between items-center"> <div className="flex flex-col items-center"> <img src="/logos/est.png" alt="EST Logo" className="w-16 h-16" /> <span className="text-lg font-bold">EST</span> </div> <div className="text-4xl font-bold">{score.est} - {score.ca}</div> <div className="flex flex-col items-center"> <img src="/logos/ca.png" alt="CA Logo" className="w-16 h-16" /> <span className="text-lg font-bold">CA</span> </div> </CardContent> </Card> {extraTime && ( <div className="mt-3 flex items-center gap-2 bg-yellow-500 text-black px-3 py-1 rounded-lg"> <Timer size={20} /> Extra Time: {extraTime} min </div> )} {redCard && ( <div className="mt-3 flex items-center gap-2 bg-red-600 px-3 py-1 rounded-lg"> <AlertCircle size={20} /> Red Card: {redCard} </div> )} <div className="mt-4 flex gap-3"> <Button onClick={() => setScore({ ...score, est: score.est + 1 })} className="bg-yellow-500 text-black">EST Goal</Button> <Button onClick={() => setScore({ ...score, ca: score.ca + 1 })} className="bg-red-600">CA Goal</Button> </div> <div className="mt-3 flex gap-3"> <Button onClick={() => setExtraTime(extraTime ? null : 5)} className="bg-yellow-300 text-black">Toggle Extra Time</Button> <Button onClick={() => setRedCard(redCard ? null : "Player #10")} className="bg-red-700">Toggle Red Card</Button> </div> </div> ); } )} )})}
Editor is loading...
Leave a Comment