8-bit game-team1

1import { cn } from "@/lib/utils";
2 
3import PlayerProfileCard from "@/components/ui/8bit/blocks/player-profile-card";
4 
5import "@/components/ui/8bit/styles/retro.css";
6 
7export interface PartyMember {
8  avatar?: string;
9  hp: number;
10  initials: string;
11  level: number;
12  mana?: number;
13  name: string;
14  xp?: number;
15}
16 
17interface GameTeam1Props {
18  className?: string;
19  description?: string;
20  members?: PartyMember[];
21  title?: string;
22}
23 
24const defaultMembers: PartyMember[] = [
25  { initials: "OR", name: "Orc", level: 42, hp: 95, mana: 80, xp: 72 },
26  { initials: "GO", name: "Goblin", level: 38, hp: 72, mana: 60, xp: 45 },
27  { initials: "OG", name: "Ogre", level: 35, hp: 88, mana: 95, xp: 30 },
28  { initials: "TR", name: "Troll", level: 31, hp: 60, mana: 40, xp: 85 },
29];
30 
31export default function GameTeam1({
32  title = "Your Party",
33  description = "The squad that ships together, wins together",
34  members = defaultMembers,
35  className,
36}: GameTeam1Props) {
37  return (
38    <section className={cn("w-full px-4 py-16", className)}>
39      <div className="mx-auto max-w-3xl">
40        {(title || description) && (
41          <div className="mb-10 text-center">
42            {title && (
43              <h2 className="retro mb-3 font-bold text-2xl tracking-tight md:text-3xl">
44                {title}
45              </h2>
46            )}
47            {description && (
48              <p className="retro text-muted-foreground text-[9px]">{description}</p>
49            )}
50          </div>
51        )}
52 
53        <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2">
54          {members.map((member) => (
55            <PlayerProfileCard
56              avatarFallback={member.initials}
57              avatarSrc={member.avatar}
58              key={member.name}
59              level={member.level}
60              playerName={member.name}
61              stats={{
62                health: { current: member.hp, max: 100 },
63                mana: member.mana
64                  ? { current: member.mana, max: 100 }
65                  : undefined,
66                experience: member.xp
67                  ? { current: member.xp, max: 100 }
68                  : undefined,
69                level: member.level,
70              }}
71            />
72          ))}
73        </div>
74      </div>
75    </section>
76  );
77}