card

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div"> & {
7  size?: "default" | "sm"
8}
9 
10const { class: className, size = "default", ...props } = Astro.props
11---
12 
13<div
14  data-slot="card"
15  data-size={size}
16  class={cn(
17    "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
18    className
19  )}
20  {...props}
21>
22  <slot />
23</div>