Card

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