Card

1"use client";23import * as React from "react";4import { cn } from "@/lib/utils";5import { sprawlify } from "@sprawlify/react";67function Card({8  className,9  size = "default",10  ...props11}: React.ComponentProps<typeof sprawlify.div> & { size?: "default" | "sm" }) {12  return (13    <sprawlify.div14      data-scope="card"15      data-part="root"16      data-slot="card"17      data-size={size}18      className={cn(19        "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",20        className,21      )}22      {...props}23    />24  );25}2627function CardHeader({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {28  return (29    <sprawlify.div30      data-scope="card"31      data-part="header"32      data-slot="card-header"33      className={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        className,36      )}37      {...props}38    />39  );40}4142function CardTitle({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {43  return (44    <sprawlify.div45      data-scope="card"46      data-part="title"47      data-slot="card-title"48      className={cn(49        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",50        className,51      )}52      {...props}53    />54  );55}5657function CardDescription({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {58  return (59    <sprawlify.div60      data-scope="card"61      data-part="description"62      data-slot="card-description"63      className={cn("text-muted-foreground text-sm", className)}64      {...props}65    />66  );67}6869function CardAction({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {70  return (71    <sprawlify.div72      data-scope="card"73      data-part="action"74      data-slot="card-action"75      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}76      {...props}77    />78  );79}8081function CardContent({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {82  return (83    <sprawlify.div84      data-scope="card"85      data-part="content"86      data-slot="card-content"87      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}88      {...props}89    />90  );91}9293function CardFooter({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {94  return (95    <sprawlify.div96      data-scope="card"97      data-part="footer"98      data-slot="card-footer"99      className={cn(100        "bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center",101        className,102      )}103      {...props}104    />105  );106}107108export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };109