52 lines
2.3 KiB
TypeScript
52 lines
2.3 KiB
TypeScript
|
import { type DashboardMember } from '@/types';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
member: DashboardMember;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function WelcomeCard({ member }: Props) {
|
||
|
|
const membership = member.membership;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<p className="text-2xl text-black font-medium tracking-wide">
|
||
|
|
Bienvenue sur votre espace Retzien, {member.firstname}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="nb-shadow-static bg-white rounded-2xl p-6 flex flex-col gap-2">
|
||
|
|
<h1 className="text-2xl font-bold">
|
||
|
|
{member.firstname} {member.lastname}
|
||
|
|
</h1>
|
||
|
|
<p className="text-sm text-muted-foreground">{member.retzien_email || member.email}</p>
|
||
|
|
|
||
|
|
{membership ? (
|
||
|
|
<div className="mt-3 flex flex-wrap gap-4 text-sm">
|
||
|
|
<span className="inline-flex items-center gap-1.5 rounded-full bg-secondary/20 text-secondary-foreground px-3 py-1 font-medium border border-secondary/40">
|
||
|
|
{membership.package?.name ?? 'Adhésion'}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
'inline-flex items-center gap-1.5 rounded-full px-3 py-1 font-medium border',
|
||
|
|
membership.status === 'active'
|
||
|
|
? 'bg-green-100 text-green-800 border-green-300 dark:bg-green-900/20 dark:text-green-400 dark:border-green-700'
|
||
|
|
: 'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-700',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{membership.status === 'active' ? 'Actif' : 'En attente'}
|
||
|
|
</span>
|
||
|
|
{membership.end_date && (
|
||
|
|
<span className="text-muted-foreground">
|
||
|
|
Valide jusqu'au {new Date(membership.end_date).toLocaleDateString('fr-FR')}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">Aucune adhésion active.</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|