peer-at-code-web/app/dashboard/badges/page.tsx
2023-07-19 12:32:39 +02:00

38 lines
1.1 KiB
TypeScript

'use client';
import { useUser } from '@/context/user';
import Badge from '@/components/ui/Badge';
import { Separator } from '@/components/ui/Separator';
export default function Page() {
const { data: me, isLoading } = useUser();
return (
<section className="flex h-full w-full flex-col space-y-4">
<header className="flex flex-col">
<h1 className="text-xl font-semibold">Mes badges</h1>
<p className="text-muted">
Vos badges sont affichés ici, vous pouvez les partager avec vos amis
</p>
</header>
<Separator />
<main className="flex flex-col justify-between space-x-0 space-y-4">
<div className="flex space-x-2">
{!isLoading && me?.badges ? (
me?.badges.map((badge, i) => (
<Badge
key={i}
name={badge.name}
src={badge.logo || '/assets/badges/java.png'}
alt={badge.name}
level={badge.level}
/>
))
) : (
<p className="text-muted">Aucun badge</p>
)}
</div>
</main>
</section>
);
}