64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/utils/utils';
|
|
import { NEUMORPHISM } from '@/styles/Neumorphism';
|
|
|
|
|
|
// IMPORTANT — contraste texte :
|
|
// Le fond clair (#e8e8e8) est assez lumineux. Dans le contenu de la Card,
|
|
// évite text-slate-400/500 en light mode (ratio WCAG insuffisant sur ce fond) :
|
|
// utilise plutôt text-slate-600 (ou plus foncé) pour le texte secondaire en light mode.
|
|
// Ex: className="text-slate-600 dark:text-slate-400"
|
|
|
|
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
// 'raised' : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
|
|
// 'flat' : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
|
|
variant?: 'raised' | 'flat'|'digged'|'prophunt';
|
|
}
|
|
|
|
export const Card = React.forwardRef<HTMLDivElement, CardProps>(
|
|
({ className, variant = 'raised', ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
// Style de base
|
|
"rounded-3xl border-none transition-all duration-300 ease-in-out flex flex-col",
|
|
"bg-[#e8e8e8] dark:bg-[#1e293b]",
|
|
// Relief neumorphique (par défaut)
|
|
variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
|
|
variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
|
|
variant === 'prophunt' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight,NEUMORPHISM.lightShadowHover,NEUMORPHISM.darkShadowHover],
|
|
// Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
|
|
variant === 'flat' && "border border-black/5 dark:border-white/10",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
Card.displayName = "Card";
|
|
|
|
export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
// Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
|
|
"px-6 py-5 flex flex-col space-y-1.5 border-black/5 dark:border-white/5 transition-all duration-300",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
CardHeader.displayName = "CardHeader";
|
|
|
|
export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
);
|
|
CardContent.displayName = "CardContent"; |