Card

1import * as React from 'react'
2 
3import { cn } from '@/lib/utils'
4 
5function Card({
6  className,
7  size = 'default',
8  ref,
9  ...props
10}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
11  return (
12    <div
13      ref={ref}
14      data-slot='card'
15      data-size={size}
16      className={cn(
17        'group/card flex flex-col gap-4 overflow-hidden rounded-md bg-card py-8 text-base/relaxed text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-6 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md',
18        className,
19      )}
20      {...props}
21    />
22  )
23}
24 
25function CardHeader({ className, ref, ...props }: React.ComponentProps<'div'>) {
26  return (
27    <div
28      ref={ref}
29      data-slot='card-header'
30      className={cn(
31        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-8 group-data-[size=sm]/card:px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
32        className,
33      )}
34      {...props}
35    />
36  )
37}
38 
39function CardTitle({ className, ref, ...props }: React.ComponentProps<'div'>) {
40  return (
41    <div
42      ref={ref}
43      data-slot='card-title'
44      className={cn('font-heading text-2xl font-medium', className)}
45      {...props}
46    />
47  )
48}
49 
50function CardDescription({ className, ref, ...props }: React.ComponentProps<'div'>) {
51  return (
52    <div
53      ref={ref}
54      data-slot='card-description'
55      className={cn('text-base/relaxed text-muted-foreground', className)}
56      {...props}
57    />
58  )
59}
60 
61function CardAction({ className, ref, ...props }: React.ComponentProps<'div'>) {
62  return (
63    <div
64      ref={ref}
65      data-slot='card-action'
66      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
67      {...props}
68    />
69  )
70}
71 
72function CardContent({ className, ref, ...props }: React.ComponentProps<'div'>) {
73  return (
74    <div
75      ref={ref}
76      data-slot='card-content'
77      className={cn('px-8 group-data-[size=sm]/card:px-6', className)}
78      {...props}
79    />
80  )
81}
82 
83function CardFooter({ className, ref, ...props }: React.ComponentProps<'div'>) {
84  return (
85    <div
86      ref={ref}
87      data-slot='card-footer'
88      className={cn(
89// … truncated