38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useContext } from 'react';
|
|
|
|
import { UserContext } from '@/context/user';
|
|
|
|
import Badge from '@/ui/Badge';
|
|
|
|
export default function Page() {
|
|
const { data: me } = useContext(UserContext);
|
|
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>
|
|
<main className="flex flex-col justify-between space-x-0 space-y-4">
|
|
<div className="flex space-x-2">
|
|
{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>
|
|
);
|
|
}
|