Card

1import { Card, CardMedia, CardHeader, CardTitle } from "@/components/ui/card";
2
3<Card />

1import { ark } from "@ark-ui/react/factory";
2import { tv, type VariantProps } from "tailwind-variants";
3import { cn } from "@/lib/utils";
4
5export const Card = (props: React.ComponentProps<typeof ark.div>) => {
6  const { className, ...rest } = props;
7
8  return (
9    <ark.div
10      className={cn(
11        "[--space:--spacing(6)]",
12        "group/card",
13        "py-(--space)",
14        "flex flex-col gap-4",
15        "bg-card",
16        "text-foreground",
17        "has-data-[variant=image]:pt-0 has-data-[slot=card-footer]:pb-0",
18        "rounded-xl border shadow-xs/5",
19        className
20      )}
21      data-slot="card"
22      {...rest}
23    />
24  );
25};
26
27const cardMediaVariants = tv({
28  base: [