"use client"; import React, { useState, useEffect } from 'react'; import { motion, useReducedMotion } from 'framer-motion'; import { Badge } from '@/components/ui/badge'; import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { Flame, MessageCircle } from 'lucide-react'; interface PredictionMarketCardProps { question?: string; teamLogo?: string; teamName?: string; initialTimeInSeconds?: number; totalBank?: number; yesBank?: number; noBank?: number; initialYesVotes?: number; initialNoVotes?: number; yesPlayers?: number; noPlayers?: number; onBetYes?: () => void; onBetNo?: () => void; enableAnimations?: boolean; } export function PredictionMarketCard({ question = "Will Bayern win a corner in the next 3 minutes?", teamLogo = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/FC_Bayern_M%C3%BCnchen_logo_%282024%29.svg/1200px-FC_Bayern_M%C3%BCnchen_logo_%282024%29.svg.png", teamName = "Bayern", initialTimeInSeconds = 60, totalBank = 145450, yesBank = 64280, noBank = 81170, initialYesVotes = 42, initialNoVotes = 58, yesPlayers = 1457, noPlayers = 1899, onBetYes, onBetNo, enableAnimations = true, }: PredictionMarketCardProps) { const [timeLeft, setTimeLeft] = useState(initialTimeInSeconds); const [yesVotes, setYesVotes] = useState(initialYesVotes); const [noVotes, setNoVotes] = useState(initialNoVotes); const [showBettingView, setShowBettingView] = useState(false); const [betType, setBetType] = useState<'yes' | 'no'>('yes'); const [betAmount, setBetAmount] = useState(''); const shouldReduceMotion = useReducedMotion(); // Timer countdown useEffect(() => { if (timeLeft <= 0) return; const timer = setInterval(() => { setTimeLeft((prev) => Math.max(0, prev - 1)); }, 1000); return () => clearInterval(timer); }, [timeLeft]); // Format time as MM:SS const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; }; // Format currency const formatCurrency = (amount: number) => { if (amount >= 1000) { return `$${(amount / 1000).toFixed(2)}K`; } return `$${amount}`; }; const handleBetYes = () => { setBetType('yes'); setShowBettingView(true); }; const handleBetNo = () => { setBetType('no'); setShowBettingView(true); }; const handleConfirmBet = () => { const adjustment = Math.floor(Math.random() * 3) + 1; // Random 1-3% change if (betType === 'yes') { setYesVotes(prev => Math.min(95, prev + adjustment)); setNoVotes(prev => Math.max(5, prev - adjustment)); onBetYes?.(); } else { setNoVotes(prev => Math.min(95, prev + adjustment)); setYesVotes(prev => Math.max(5, prev - adjustment)); onBetNo?.(); } setShowBettingView(false); setBetAmount(''); }; const handleBackToMain = () => { setShowBettingView(false); setBetAmount(''); }; const handleQuickAmount = (amount: number) => { setBetAmount(amount.toString()); }; const handleAmountChange = (e: React.ChangeEvent) => { const value = e.target.value.replace(/[^0-9]/g, ''); setBetAmount(value); }; const totalVotes = yesVotes + noVotes; const progressValue = (yesVotes / totalVotes) * 100; const timerProgress = (timeLeft / initialTimeInSeconds) * 100; // Reversed: starts at 100%, goes to 0% const shouldAnimate = enableAnimations && !shouldReduceMotion; // Animation variants const containerVariants = { hidden: { opacity: 0, y: 20, scale: 0.95, filter: "blur(4px)", }, visible: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 300, damping: 30, mass: 0.8, staggerChildren: 0.08, delayChildren: 0.1, }, }, }; const itemVariants = { hidden: { opacity: 0, x: -15, scale: 0.95, filter: "blur(2px)", }, visible: { opacity: 1, x: 0, scale: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 400, damping: 28, mass: 0.6, }, }, }; const badgeVariants = { hidden: { scale: 0, opacity: 0, filter: "blur(2px)" }, visible: { scale: 1, opacity: 1, filter: "blur(0px)", transition: { type: "spring", stiffness: 500, damping: 25, mass: 0.5, }, }, }; const progressBarVariants = { hidden: { scaleX: 0, opacity: 0 }, visible: { scaleX: 1, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30, delay: 0.4, }, }, }; const buttonContainerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.5, }, }, }; return (

{/* Main Content */}

{/* Header with badges and timer */}

HOT BET SOCCER

{formatTime(timeLeft)} {/* Team info and question */} {teamName.charAt(0)}

{question}

{/* Gradient separator */} {/* Bank information */}

Total Bank

{formatCurrency(totalBank)}

Bank YES

{formatCurrency(yesBank)}

Bank NO

{formatCurrency(noBank)}

{/* Voting statistics */}

Voted YES

{yesVotes}%

Voted NO

{noVotes}%

{/* Progress bar */}

{/* Diagonal separator */}

{/* Player counts */} {yesPlayers.toLocaleString()} PLAYERS {noPlayers.toLocaleString()} PLAYERS {/* Betting buttons */}

{/* Betting View */}

{/* Header with back button */}

Back {formatTime(timeLeft)}

{/* Question header */}

{teamName.charAt(0)}

{question}

{/* Bet type indicator */}

YOUR BET

{betType === 'yes' ? 'YES ↗' : 'NO ↘'}

{/* Amount input */}

{/* Quick amount buttons */}

{[10, 20, 50, 100].map((amount) => ( handleQuickAmount(amount)} className="bg-muted/50 hover:bg-muted/80 border border-border/30 rounded-lg py-2 text-sm font-medium text-muted-foreground transition-all duration-200" > +${amount} ))}

{/* Confirm button */} CONFIRM BET {betAmount && ( )} {betAmount && ( <> {/* Gradient shine effect */}

{/* Subtle inner glow */}

)}

{/* Timer progress bar - stays at bottom */}

); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Prediction Market Card

Created by

Installation

How to use

Dependencies

Prediction Market Card

Created by

Installation

How to use

Dependencies