b95948f980
- Updated routing for mail settings to redirect to the new settings layout. - Introduced new account layout and section components for better organization. - Replaced hardcoded paths with constants for account and mail settings to enhance maintainability. - Removed deprecated mail settings layout and integrated it into the new settings structure. - Enhanced user experience by streamlining navigation between account and mail settings.
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { ChevronRight, ShieldCheck, UserRound } from "lucide-react"
|
|
import { AccountAvatar } from "@/components/suite/account-avatar"
|
|
import { CompteSettingsCard } from "@/components/compte/compte-settings-card"
|
|
import { useChromeIdentity } from "@/lib/hooks/use-chrome-identity"
|
|
import { ACCOUNT_SETTINGS_BASE_PATH } from "@/lib/compte-settings/settings-nav"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const CARDS = [
|
|
{
|
|
href: `${ACCOUNT_SETTINGS_BASE_PATH}/informations`,
|
|
icon: UserRound,
|
|
title: "Informations personnelles",
|
|
description:
|
|
"Consultez votre nom, votre adresse e-mail et votre identifiant Ulti.",
|
|
},
|
|
{
|
|
href: `${ACCOUNT_SETTINGS_BASE_PATH}/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,
|
|
avatarUrl: identity.avatarUrl,
|
|
}}
|
|
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 block">
|
|
<CompteSettingsCard
|
|
className={cn(
|
|
"h-full transition-colors hover:bg-accent/40",
|
|
"group-focus-visible:ring-2 group-focus-visible:ring-ring"
|
|
)}
|
|
>
|
|
<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 block text-sm text-muted-foreground">
|
|
{card.description}
|
|
</span>
|
|
</CompteSettingsCard>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|