card

1import * 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('bg-card text-card-foreground rounded-xl border shadow-sm', className)}
10            {...props}
11        />
12    )
13}
14 
15function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
16    return (
17        <div
18            data-slot="card-header"
19            className={cn('flex flex-col gap-1.5 p-6', className)}
20            {...props}
21        />
22    )
23}
24 
25function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
26    return (
27        <div
28            data-slot="card-title"
29            className={cn('font-semibold leading-none tracking-tight', className)}
30            {...props}
31        />
32    )
33}
34 
35function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
36    return (
37        <div
38            data-slot="card-description"
39            className={cn('text-muted-foreground text-sm', className)}
40            {...props}
41        />
42    )
43}
44 
45function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
46    return (
47        <div
48            data-slot="card-content"
49            className={cn('p-6 pt-0', className)}
50            {...props}
51        />
52    )
53}
54 
55function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
56    return (
57        <div
58            data-slot="card-footer"
59            className={cn('flex items-center p-6 pt-0', className)}
60            {...props}
61        />
62    )
63}
64 
65export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }