Card

1import { cn } from "@/lib/utils";2import { sprawlify } from "@sprawlify/solid";3import type { ComponentProps } from "solid-js";4import { splitProps } from "solid-js";56function Card(props: ComponentProps<typeof sprawlify.div> & { size?: "default" | "sm" }) {7  const [local, others] = splitProps(props, ["class", "size"]);8  const size = () => local.size ?? "default";910  return (11    <sprawlify.div12      data-scope="card"13      data-part="root"14      data-slot="card"15      data-size={size()}16      class={cn(17        "ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-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",18        local.class,19      )}20      {...others}21    />22  );23}2425function CardHeader(props: ComponentProps<typeof sprawlify.div>) {26  const [local, others] = splitProps(props, ["class"]);2728  return (29    <sprawlify.div30      data-scope="card"31      data-part="header"32      data-slot="card-header"33      class={cn(34        "gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/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]",35        local.class,36      )}37      {...others}38    />39  );40}4142function CardTitle(props: ComponentProps<typeof sprawlify.div>) {43  const [local, others] = splitProps(props, ["class"]);4445  return (46    <sprawlify.div47      data-scope="card"48      data-part="title"49      data-slot="card-title"50      class={cn(51        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",52        local.class,53      )}54      {...others}55    />56  );57}5859function CardDescription(props: ComponentProps<typeof sprawlify.div>) {60  const [local, others] = splitProps(props, ["class"]);6162  return (63    <sprawlify.div64      data-scope="card"65      data-part="description"66      data-slot="card-description"67      class={cn("text-muted-foreground text-sm", local.class)}68      {...others}69    />70  );71}7273function CardAction(props: ComponentProps<typeof sprawlify.div>) {74  const [local, others] = splitProps(props, ["class"]);7576  return (77    <sprawlify.div78      data-scope="card"79      data-part="action"80      data-slot="card-action"81      class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", local.class)}82      {...others}83    />84  );85}8687function CardContent(props: ComponentProps<typeof sprawlify.div>) {88  const [local, others] = splitProps(props, ["class"]);8990  return (91    <sprawlify.div92      data-scope="card"93      data-part="content"94      data-slot="card-content"95      class={cn("px-4 group-data-[size=sm]/card:px-3", local.class)}96      {...others}97    />98  );99}100101function CardFooter(props: ComponentProps<typeof sprawlify.div>) {102  const [local, others] = splitProps(props, ["class"]);103104  return (105    <sprawlify.div106      data-scope="card"107      data-part="footer"108      data-slot="card-footer"109      class={cn(110        "bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center",111        local.class,112      )}113      {...others}114    />115  );116}117118export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };119