AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Achievements component for thresholds and milestones

Browse source 
cgen-8b5c84a55a524ff3a4bb85c40f30608a
This commit is contained in:
Builder.io 2025-10-18 23:54:22 +00:00
parent 006700d5b7
commit cc0dedba5f
1 changed files with 38 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
client/components/roadmap/Achievements.tsx Normal file
View file

@ -0,0 +1,38 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Trophy, Award, Crown, Compass } from "lucide-react";
export default function Achievements({ earnedXp, phaseClaims }: { earnedXp: number; phaseClaims: Record<string, number>; }) {
const badges: { id: string; label: string; unlocked: boolean; icon: any; desc: string }[] = [
{ id: "rookie", label: "Rookie Explorer", unlocked: earnedXp >= 100, icon: Compass, desc: "Earn 100+ XP" },
{ id: "seasoned", label: "Seasoned Adventurer", unlocked: earnedXp >= 300, icon: Trophy, desc: "Earn 300+ XP" },
{ id: "master", label: "Master Builder", unlocked: earnedXp >= 600, icon: Crown, desc: "Earn 600+ XP" },
{ id: "trailblazer", label: "Trailblazer", unlocked: ["now","month1","month2","month3"].every((k) => (phaseClaims[k] || 0) > 0), icon: Award, desc: "Complete a quest in every phase" },
];
return (
<Card className="bg-card/60 border-border/40 backdrop-blur">
<CardHeader>
<CardTitle>Achievements</CardTitle>
<CardDescription>Earn badges as you progress. Displayed publicly soon.</CardDescription>
</CardHeader>
<CardContent className="flex flex-wrap gap-3">
{badges.map((b) => {
const Icon = b.icon;
return (
<div key={b.id} className="flex items-center gap-2 rounded border border-border/40 px-3 py-2">
<Icon className={"h-4 w-4 " + (b.unlocked ? "text-aethex-300" : "text-muted-foreground")} />
<div className="text-sm">
<div className={b.unlocked ? "text-foreground" : "text-muted-foreground"}>{b.label}</div>
<div className="text-[11px] text-muted-foreground">{b.desc}</div>
</div>
<Badge variant="outline" className={b.unlocked ? "ml-2 border-emerald-500/40 text-emerald-300" : "ml-2"}>
{b.unlocked ? "Unlocked" : "Locked"}
</Badge>
</div>
);
})}
</CardContent>
</Card>
);
}