Untitled

import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { motion } from "framer-motion";

export default function WinrateTracker() { const [wins, setWins] = useState(0); const [losses, setLosses] = useState(0);

const total = wins + losses; const winrate = total === 0 ? 0 : ((wins / total) * 100).toFixed(1);

return ( <div className="flex items-center justify-center h-screen bg-gray-900 text-white"> <Card className="p-6 rounded-2xl shadow-2xl bg-gray-800"> <CardContent className="flex flex-col items-center gap-6"> <motion.div className="w-64 h-64 rounded-full border-4 border-green-400 flex flex-col items-center justify-center" animate={{ scale: [1, 1.05, 1] }} transition={{ repeat: Infinity, duration: 2 }} > <div className="text-sm text-gray-400">WINRATE</div> <div className="text-5xl font-bold text-green-400"> {winrate}% </div> <div className="flex gap-6 mt-4 text-lg"> <span className="text-green-400">W {wins}</span> <span className="text-red-400">L {losses}</span> </div> </motion.div>

<div className="flex gap-4">
        <Button
                  className="bg-green-500 hover:bg-green-600"
                            onClick={() => setWins(wins + 1)}
                                    >
                                              + Win
                                                      </Button>
                                                              <Button
                                                                        className="bg-red-500 hover:bg-red-600"
                                                                                  onClick={() => setLosses(losses + 1)}
                                                                                          >
                                                                                                    + Loss
                                                                                                            </Button>
                                                                                                                  </div>
                                                                                                                  
                                                                                                                        <div className="flex gap-4">
                                                                                                                                <Button
                                                                                                                                          variant="outline"
                                                                                                                                                    onClick={() => setWins(Math.max(0, wins - 1))}
                                                                                                                                                            >
                                                                                                                                                                      - Win
                                                                                                                                                                              </Button>
                                                                                                                                                                                      <Button
                                                                                                                                                                                                variant="outline"
                                                                                                                                                                                                          onClick={() => setLosses(Math.max(0, losses - 1))})}