8-bit Game Progress

1import { cn } from "@/lib/utils";
2 
3import {
4  Card,
5  CardContent,
6  CardHeader,
7  CardTitle,
8} from "@/components/ui/8bit/card";
9import HealthBar from "@/components/ui/8bit/health-bar";
10import ManaBar from "@/components/ui/8bit/mana-bar";
11import { Progress } from "@/components/ui/8bit/progress";
12 
13export default function GameProgress({
14  className,
15  ...props
16}: React.ComponentProps<"div">) {
17  return (
18    <Card className={cn(className)} {...props}>
19      <CardHeader>
20        <CardTitle className="text-sm font-medium">Game Progress</CardTitle>
21      </CardHeader>
22      <CardContent className="space-y-4">
23        <div>
24          <div className="flex justify-between text-sm mb-2">
25            <span>Health</span>
26            <span>75%</span>
27          </div>
28          <HealthBar value={75} />
29        </div>
30        <div>
31          <div className="flex justify-between text-sm mb-2">
32            <span>Mana</span>
33            <span>45%</span>
34          </div>
35          <ManaBar value={45} />
36        </div>
37        <div>
38          <div className="flex justify-between text-sm mb-2">
39            <span>Experience</span>
40            <span>90%</span>
41          </div>
42          <Progress value={90} />
43        </div>
44      </CardContent>
45    </Card>
46  );
47}