snapme

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