Lien vers le profil d'un utilisateur avec affichage automatique des badges. Supporte 3 variantes de style et recupere les badges/statut partenaire via Supabase si les donnees ne sont pas fournies en props.
Note : Le composant reel utilise useUserBadges(), usePartnerStatus() et createSupabaseClientWithUser() pour recuperer les donnees. Les mockups ci-dessous reproduisent le rendu visuel sans ces dependances.
import { UserLink } from "@/components/ui/user-link"
// Dans un classement
<div className="flex items-center gap-2">
<span className="text-sm font-mono">1.</span>
<UserLink username="Thomas" variant="highlight" />
<span className="text-sm text-muted-foreground ml-auto">7.42s</span>
</div>
// Dans un chat / commentaire
<p>
<UserLink username="Lucas" variant="default" showIcon /> a resolu
le cube en 12.34 secondes !
</p>
// Mode discret dans du texte
<p>
Solve partage par <UserLink username="Emma" variant="subtle" />
</p>
// Optimise : donnees pre-fournies
<UserLink
username="Thomas"
userId="user_abc123"
userSlug="thomas"
userBadges={["creator"]}
isPartner={false}
/>Utilisation typique dans un classement de session.
| Variant | Style | Usage typique |
|---|---|---|
| default | Bleu primaire | Liens utilisateur standards, classements |
| subtle | Gris attenue | Mentions dans le texte, attributions |
| highlight | Blanc/foreground gras | Mise en avant (profil, en-tete) |
Le composant gere intelligemment le chargement des donnees :
userId est fourni : pas de fetch pour l'ID, utilise directement.userBadges est fourni : pas de fetch via useUserBadges().isPartner est fourni : pas de fetch via usePartnerStatus().userId : fetch Supabase par username pour recuperer l'ID et le slug de profil.| Prop | Type | Default | Description |
|---|---|---|---|
| username | string | — | Nom d'utilisateur affiche et utilise pour la recherche Supabase. |
| variant | "default" | "subtle" | "highlight" | "default" | Style visuel du lien. |
| showIcon | boolean | false | Affiche l'icone User (lucide) avant le nom. |
| showBadges | boolean | true | Affiche les badges utilisateur a cote du nom. |
| userId | string | — | ID Clerk de l'utilisateur. Evite le fetch Supabase si fourni. |
| userSlug | string | null | — | Slug de profil pour l'URL. Genere depuis username si absent. |
| userBadges | string[] | — | Liste des badges. Evite le fetch useUserBadges() si fourni. |
| isPartner | boolean | — | Statut partenaire. Evite le fetch usePartnerStatus() si fourni. |
| className | string | — | Classes CSS additionnelles. |
| Dependance | Raison |
|---|---|
| UserBadge | Affiche les badges de role a cote du nom. |
| useUserBadges() | Hook pour recuperer les badges d'un utilisateur via Supabase. |
| usePartnerStatus() | Hook pour verifier le statut partenaire. |
| createSupabaseClientWithUser() | Client Supabase pour la recherche de profil par username. |
| slugifyUsername() | Genere un slug URL-safe a partir du username comme fallback. |