8-bit game-hero2

1import Link from "next/link";
2 
3import { cn } from "@/lib/utils";
4 
5import { Badge } from "@/components/ui/8bit/badge";
6import { Button } from "@/components/ui/8bit/button";
7import { Progress } from "@/components/ui/8bit/progress";
8 
9import "@/components/ui/8bit/styles/retro.css";
10 
11export interface Milestone {
12  label: string;
13  reached: boolean;
14}
15 
16interface GameHero2Props {
17  actions?: Array<{
18    href?: string;
19    label: string;
20    variant?: "default" | "destructive" | "ghost" | "outline" | "secondary";
21  }>;
22  className?: string;
23  description?: string;
24  level?: number;
25  milestones?: Milestone[];
26  title: string;
27  xpValue?: number;
28}
29 
30const defaultMilestones: Milestone[] = [
31  { label: "Lv 1", reached: true },
32  { label: "Lv 10", reached: true },
33  { label: "Lv 25", reached: true },
34  { label: "Lv 50", reached: false },
35  { label: "Lv 99", reached: false },
36];
37 
38export default function GameHero2({
39  title = "YOUR JOURNEY SO FAR",
40  description = "Every line of code levels you up. Keep shipping to unlock the next milestone.",
41  level = 25,
42  xpValue = 62,
43  milestones = defaultMilestones,
44  actions = [
45    { label: "KEEP BUILDING", variant: "default", href: "/docs" },
46    { label: "VIEW SKILLS", variant: "outline", href: "/v2" },
47  ],
48  className,
49}: GameHero2Props) {
50  return (
51    <section className={cn("relative w-full px-4 py-16 md:py-24", className)}>
52      <div className="mx-auto max-w-2xl text-center">
53        <div className="mb-6">
54          <Badge>LEVEL {level}</Badge>
55        </div>
56 
57        <h1 className="retro mb-4 font-bold text-3xl tracking-tight md:text-5xl">
58          {title}
59        </h1>
60 
61        {description && (
62          <p className="mx-auto mb-8 max-w-lg text-muted-foreground retro text-[9px] leading-relaxed">
63            {description}
64          </p>
65        )}
66 
67        {/* XP bar */}
68        <div className="mx-auto mb-4 max-w-md">
69          <div className="retro mb-2 flex justify-between text-[10px]">
70            <span>XP Progress</span>
71            <span>{xpValue}%</span>
72          </div>
73          <Progress className="h-3" value={xpValue} />
74        </div>
75 
76        {/* Milestones */}
77        <div className="mx-auto mb-8 flex max-w-md justify-between">
78          {milestones.map((m) => (
79            <Badge key={m.label} variant={m.reached ? "default" : "secondary"}>
80              {m.label}
81            </Badge>
82          ))}
83        </div>
84 
85        {actions.length > 0 && (
86// … truncated