[V0_FILE]typescriptreact:file="test-results-dashboard.tsx" "use client" import type React from "react" import { useEffect, useState } from "react" import { CheckCircle, Clock, XCircle } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" export default function TestResultsDashboard() { const [animate, setAnimate] = useState(false) useEffect(() => { // Start animation after component mounts const timer = setTimeout(() => setAnimate(true), 500) return () => clearTimeout(timer) }, []) return (

Well Done!

Your result is here instant_off

Marks

Marks Scored

-1

Total Marks

Subject	Marks	Percentage
CHEMISTRY	-1	0%

Time Taken

Total Test Time

5 Sec

Total Time Taken

9 Sec

Avg Time Per Ques

1 Sec

} percentage={animate ? 40 : 0} fraction="2/5" color="#10b981" bgColor="#f0f9f4" /> } percentage={animate ? 60 : 0} fraction="3/5" color="#ef4444" bgColor="#fef2f2" /> } percentage={0} fraction="0/5" color="#f59e0b" bgColor="#fffbeb" /> } percentage={animate ? 40 : 0} fraction="40/100" color="#4f46e5" bgColor="#eef2ff" />

) } interface ProgressCardProps { title: string icon: React.ReactNode percentage: number fraction: string color: string bgColor: string } function ProgressCard({ title, icon, percentage, fraction, color, bgColor }: ProgressCardProps) { return (

{icon} {title}

{fraction}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import TestResultsDashboard from "../test-results-dashboard" export default function Page() { return }