8-bit Advanced 2

1import type { ReactNode } from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import {
6  Card,
7  CardContent,
8  CardHeader,
9  CardTitle,
10} from "@/components/ui/8bit/card";
11import { Progress } from "@/components/ui/8bit/progress";
12 
13import "@/components/ui/8bit/styles/retro.css";
14 
15export interface MetricCard {
16  change?: string;
17  icon: ReactNode;
18  progress?: number;
19  title: string;
20  value: string;
21}
22 
23interface Advanced2Props {
24  className?: string;
25  description?: string;
26  metrics?: MetricCard[];
27  title?: string;
28}
29 
30const defaultMetrics: MetricCard[] = [
31  {
32    icon: "HP",
33    title: "Active Players",
34    value: "12,847",
35    change: "+23% this week",
36    progress: 78,
37  },
38  {
39    icon: "XP",
40    title: "Total XP Earned",
41    value: "4.2M",
42    change: "+180K today",
43 
44  },
45  {
46    icon: "GP",
47    title: "Gold Collected",
48    value: "891K",
49    change: "+12% this month",
50    progress: 45,
51  },
52  {
53    icon: "LV",
54    title: "Avg Player Level",
55    value: "34",
56    change: "+2 this week",
57    progress: 68,
58  },
59];
60 
61export default function Advanced2({
62  title = "Stats Dashboard",
63  description = "Real-time metrics from the battlefield",
64  metrics = defaultMetrics,
65  className,
66}: Advanced2Props) {
67  return (
68    <section className={cn("w-full px-4 py-16", className)}>
69      <div className="mx-auto max-w-4xl">
70        {(title || description) && (
71          <div className="mb-10 text-center">
72            {title && (
73              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
74                {title}
75              </h2>
76            )}
77            {description && (
78              <p className="retro text-muted-foreground text-[9px]">{description}</p>
79            )}
80          </div>
81        )}
82 
83        <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2">
84          {metrics.map((metric) => (
85            <Card key={metric.title}>
86              <CardHeader className="pb-2">
87                <div className="flex items-center justify-between">
88                  <CardTitle className="text-xs text-muted-foreground">
89                    {metric.title}
90                  </CardTitle>
91                  <span className="retro font-bold text-sm">{metric.icon}</span>
92                </div>
93              </CardHeader>
94              <CardContent>
95                <div className="retro mb-1 font-bold text-2xl">
96                  {metric.value}
97                </div>
98                {metric.change && (
99// … truncated