spb/fetcha

1import * as React from "react";2import { cn } from "@/lib/utils";34export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {5  return <div className={cn("rounded-lg border border-border bg-bg-elevated text-fg shadow-xs", className)} {...props} />;6}7export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {8  return <div className={cn("flex flex-col gap-1 px-5 pt-5 pb-3", className)} {...props} />;9}10export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {11  return <h3 className={cn("text-[15px] font-semibold leading-tight tracking-tight", className)} {...props} />;12}13export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {14  return <p className={cn("text-[13px] text-fg-muted leading-relaxed", className)} {...props} />;15}16export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {17  return <div className={cn("px-5 pb-5", className)} {...props} />;18}19export function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {20  return <div className={cn("flex items-center gap-3 border-t border-border px-5 py-3 bg-bg-subtle/60 rounded-b-lg", className)} {...props} />;21}22