card

1import { cn } from "~/lib/utils.ts";
2import type { Component, ComponentProps } from "solid-js";
3 
4import { splitProps } from "solid-js";
5 
6const Card: Component<ComponentProps<"div"> & { size?: "default" | "sm" }> = (
7  props,
8) => {
9  const [local, others] = splitProps(props, ["class", "size"]);
10  return (
11    <div
12      data-slot="card"
13      data-size={local.size ?? "default"}
14      class={cn(
15        "ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--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-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
16        local.class,
17      )}
18      {...others}
19    />
20  );
21};
22 
23const CardHeader: Component<ComponentProps<"div">> = (props) => {
24  const [local, others] = splitProps(props, ["class"]);
25  return (
26    <div
27      data-slot="card-header"
28      class={cn(
29        "@container/card-header gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
30        local.class,
31      )}
32      {...others}
33    />
34  );
35};
36 
37const CardTitle: Component<ComponentProps<"div">> = (props) => {
38  const [local, others] = splitProps(props, ["class"]);
39  return (
40    <div
41      data-slot="card-title"
42      class={cn(
43        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm font-heading",
44        local.class,
45      )}
46      {...others}
47    />
48  );
49};
50 
51const CardDescription: Component<ComponentProps<"div">> = (props) => {
52  const [local, others] = splitProps(props, ["class"]);
53  return (
54    <div
55      data-slot="card-description"
56      class={cn("text-muted-foreground text-sm", local.class)}
57      {...others}
58    />
59  );
60};
61 
62const CardAction: Component<ComponentProps<"div">> = (props) => {
63  const [local, others] = splitProps(props, ["class"]);
64  return (
65    <div
66      data-slot="card-action"
67      class={cn(
68        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
69        local.class,
70      )}
71      {...others}
72    />
73  );
74};
75 
76const CardContent: Component<ComponentProps<"div">> = (props) => {
77  const [local, others] = splitProps(props, ["class"]);
78  return (
79    <div
80// … truncated