separator

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div"> & {
7  orientation?: "horizontal" | "vertical"
8  decorative?: boolean
9}
10 
11const {
12  class: className,
13  orientation = "horizontal",
14  decorative = true,
15  ...props
16} = Astro.props
17---
18 
19<div
20  data-slot="separator"
21  data-orientation={orientation}
22  data-horizontal={orientation === "horizontal" ? "" : undefined}
23  data-vertical={orientation === "vertical" ? "" : undefined}
24  role={decorative ? "none" : "separator"}
25  aria-orientation={decorative ? undefined : orientation}
26  class={cn(
27    "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
28    className
29  )}
30  {...props}
31>
32</div>