Card

1import * as React from "react"
2import { cn } from "@/lib/utils"
3 
4type CardProps = React.ComponentProps<"div"> & {
5  render?: React.ReactElement
6}
7 
8function Card({ className, render, children, ...props }: CardProps) {
9  const classes = cn(
10    "rounded-xl bg-card text-card-foreground shadow ring shadow-black/6.5 ring-border",
11    className
12  )
13 
14  if (render) {
15    const renderProps = render.props as {
16      className?: string
17      children?: React.ReactNode
18    }
19 
20    return React.cloneElement(
21      render as React.ReactElement<Record<string, unknown>>,
22      {
23        ...props,
24        className: cn(classes, renderProps.className),
25        // Prefer children already provided inside `render={...}`
26        children: children ?? renderProps.children,
27      }
28    )
29  }
30 
31  return (
32    <div data-slot="card" className={classes} {...props}>
33      {children}
34    </div>
35  )
36}
37 
38function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
39  return (
40    <div
41      data-slot="card-header"
42      className={cn("flex flex-col gap-1.5 p-6", className)}
43      {...props}
44    />
45  )
46}
47 
48function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
49  return (
50    <div
51      data-slot="card-title"
52      className={cn("leading-none font-semibold tracking-tight", className)}
53      {...props}
54    />
55  )
56}
57 
58function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
59  return (
60    <div
61      data-slot="card-description"
62      className={cn("text-sm text-muted-foreground", className)}
63      {...props}
64    />
65  )
66}
67 
68function CardContent({ className, ...props }: React.ComponentProps<"div">) {
69  return (
70    <div
71      data-slot="card-content"
72      className={cn("p-6 pt-0", className)}
73      {...props}
74    />
75  )
76}
77 
78function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
79  return (
80    <div
81      data-slot="card-footer"
82      className={cn("flex items-center p-6 pt-0", className)}
83      {...props}
84    />
85  )
86}
87 
88export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }