spb/spboucher.ai Public

1/*2  card.tsx3  spboucher.ai Web4  Author: Simon-Pierre Boucher5  Mail: contact@spboucher.ai6*/78import * as React from "react";910import { cn } from "@/lib/utils";1112const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(13  ({ className, ...props }, ref) => (14    <div15      ref={ref}16      className={cn(17        "rounded-[0.9rem] border border-border bg-card text-card-foreground shadow-[var(--shadow-soft)] transition-all duration-300",18        className19      )}20      {...props}21    />22  )23);24Card.displayName = "Card";2526const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(27  ({ className, ...props }, ref) => (28    <div29      ref={ref}30      className={cn("flex flex-col space-y-1.5 p-6", className)}31      {...props}32    />33  )34);35CardHeader.displayName = "CardHeader";3637const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(38  ({ className, ...props }, ref) => (39    <h340      ref={ref}41      className={cn("font-semibold leading-none tracking-tight", className)}42      {...props}43    />44  )45);46CardTitle.displayName = "CardTitle";4748const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(49  ({ className, ...props }, ref) => (50    <p51      ref={ref}52      className={cn("text-sm text-muted-foreground", className)}53      {...props}54    />55  )56);57CardDescription.displayName = "CardDescription";5859const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(60  ({ className, ...props }, ref) => (61    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />62  )63);64CardContent.displayName = "CardContent";6566const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(67  ({ className, ...props }, ref) => (68    <div69      ref={ref}70      className={cn("flex items-center p-6 pt-0", className)}71      {...props}72    />73  )74);75CardFooter.displayName = "CardFooter";7677export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };78