8-bit game-features1

1import type { ReactNode } from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import { Badge } from "@/components/ui/8bit/badge";
6import {
7  Card,
8  CardContent,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/8bit/card";
13import { Progress } from "@/components/ui/8bit/progress";
14 
15import "@/components/ui/8bit/styles/retro.css";
16 
17export interface Skill {
18  description: string;
19  level: number;
20  maxLevel: number;
21  title: string;
22  unlocked: boolean;
23}
24 
25interface GameFeatures1Props {
26  className?: string;
27  description?: string;
28  skills?: Skill[];
29  title?: string;
30}
31 
32const defaultSkills: Skill[] = [
33  {
34    title: "Components",
35    description: "Base UI primitives. Buttons, cards, inputs, dialogs.",
36    level: 3,
37    maxLevel: 3,
38    unlocked: true,
39  },
40  {
41    title: "Blocks",
42    description: "Full page sections. Hero, pricing, FAQ, timelines.",
43    level: 2,
44    maxLevel: 3,
45    unlocked: true,
46  },
47  {
48    title: "Dark Mode",
49    description: "Every component works in light and dark mode.",
50    level: 3,
51    maxLevel: 3,
52    unlocked: true,
53  },
54  {
55    title: "Accessibility",
56    description: "Keyboard nav, screen readers, focus management.",
57    level: 2,
58    maxLevel: 3,
59    unlocked: true,
60  },
61  {
62    title: "Templates",
63    description: "Full landing page templates. One-click deploy.",
64    level: 0,
65    maxLevel: 3,
66    unlocked: false,
67  },
68  {
69    title: "Icon Pack",
70    description: "Native 8-bit pixel icon library.",
71    level: 0,
72    maxLevel: 3,
73    unlocked: false,
74  },
75];
76 
77export default function GameFeatures1({
78  title = "Skill Tree",
79  description = "Unlock abilities as the project evolves",
80  skills = defaultSkills,
81  className,
82}: GameFeatures1Props) {
83  return (
84    <section className={cn("w-full px-4 py-16", className)}>
85      <div className="mx-auto max-w-4xl">
86        {(title || description) && (
87          <div className="mb-10 text-center">
88            {title && (
89              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
90                {title}
91              </h2>
92            )}
93            {description && (
94              <p className="retro text-muted-foreground text-[9px]">{description}</p>
95            )}
96          </div>
97        )}
98 
99        <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2 lg:grid-cols-3">
100          {skills.map((skill) => (
101            <Card
102              className={cn(!skill.unlocked && "opacity-50")}
103              key={skill.title}
104            >
105// … truncated