Card

1import { cn } from '@/lib/classnames';
2import type { ComponentProps } from 'react';
3 
4function CardRoot({ className, ...props }: ComponentProps<'div'>) {
5  return (
6    <div
7      className={cn(
8        'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
9        className,
10      )}
11      data-slot='card'
12      {...props}
13    />
14  );
15}
16 
17function CardHeader({ className, ...props }: ComponentProps<'div'>) {
18  return (
19    <div
20      className={cn(
21        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
22        className,
23      )}
24      data-slot='card-header'
25      {...props}
26    />
27  );
28}
29 
30function CardTitle({ className, ...props }: ComponentProps<'div'>) {
31  return (
32    <div
33      className={cn('font-semibold leading-none', className)}
34      data-slot='card-title'
35      {...props}
36    />
37  );
38}
39 
40function CardDescription({ className, ...props }: ComponentProps<'div'>) {
41  return (
42    <div
43      className={cn('text-muted-foreground text-sm', className)}
44      data-slot='card-description'
45      {...props}
46    />
47  );
48}
49 
50function CardAction({ className, ...props }: ComponentProps<'div'>) {
51  return (
52    <div
53      className={cn(
54        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
55        className,
56      )}
57      data-slot='card-action'
58      {...props}
59    />
60  );
61}
62 
63function CardContent({ className, ...props }: ComponentProps<'div'>) {
64  return (
65    <div
66      className={cn('px-6', className)}
67      data-slot='card-content'
68      {...props}
69    />
70  );
71}
72 
73function CardFooter({ className, ...props }: ComponentProps<'div'>) {
74  return (
75    <div
76      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
77      data-slot='card-footer'
78      {...props}
79    />
80  );
81}
82 
83const Card = Object.assign(CardRoot, {
84  Header: CardHeader,
85  Footer: CardFooter,
86  Title: CardTitle,
87  Action: CardAction,
88  Description: CardDescription,
89  Content: CardContent,
90});
91 
92export { Card };