78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { ChevronRight, ShieldCheck, UserRound } from "lucide-react"
|
|
import { AccountAvatar } from "@/components/suite/account-avatar"
|
|
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
|
|
|
|
const CARDS = [
|
|
{
|
|
href: "/compte/informations",
|
|
icon: UserRound,
|
|
title: "Informations personnelles",
|
|
description:
|
|
"Consultez votre nom, votre adresse e-mail et votre identifiant Ulti.",
|
|
},
|
|
{
|
|
href: "/compte/securite",
|
|
icon: ShieldCheck,
|
|
title: "Sécurité",
|
|
description:
|
|
"Gérez votre mot de passe, la validation en deux étapes et vos sessions.",
|
|
},
|
|
] as const
|
|
|
|
export function CompteHomeSection() {
|
|
const identity = useChromeIdentity()
|
|
|
|
return (
|
|
<>
|
|
<header className="mb-8 flex flex-col items-center text-center">
|
|
{identity ? (
|
|
<AccountAvatar
|
|
account={{ name: identity.name, email: identity.email }}
|
|
size="lg"
|
|
/>
|
|
) : (
|
|
<div className="size-20 rounded-full bg-muted" aria-hidden />
|
|
)}
|
|
<h2 className="mt-4 text-2xl font-normal text-foreground">
|
|
{identity ? `Bonjour ${identity.firstName} !` : "Votre compte Ulti"}
|
|
</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Gérez vos informations et la sécurité de votre compte sur l'ensemble
|
|
de la suite Ulti.
|
|
</p>
|
|
{identity ? (
|
|
<p className="mt-1 text-sm text-muted-foreground">{identity.email}</p>
|
|
) : null}
|
|
</header>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{CARDS.map((card) => {
|
|
const Icon = card.icon
|
|
return (
|
|
<Link
|
|
key={card.href}
|
|
href={card.href}
|
|
className="group flex flex-col rounded-2xl border border-border bg-background p-5 transition-colors hover:bg-accent"
|
|
>
|
|
<Icon className="size-6 text-muted-foreground" aria-hidden />
|
|
<span className="mt-3 flex items-center gap-1 text-sm font-medium text-foreground">
|
|
{card.title}
|
|
<ChevronRight
|
|
className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5"
|
|
aria-hidden
|
|
/>
|
|
</span>
|
|
<span className="mt-1 text-sm text-muted-foreground">
|
|
{card.description}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|