tabs

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div"> & {
7  defaultValue?: string
8  orientation?: "horizontal" | "vertical"
9  activationMode?: "auto" | "manual"
10}
11 
12const {
13  class: className,
14  defaultValue,
15  orientation = "horizontal",
16  activationMode,
17  ...props
18} = Astro.props
19---
20 
21<div
22  data-slot="tabs"
23  data-default-value={defaultValue}
24  data-orientation={orientation}
25  data-activation-mode={activationMode}
26  data-horizontal={orientation === "horizontal" ? "" : undefined}
27  data-vertical={orientation === "vertical" ? "" : undefined}
28  class={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
29  {...props}
30>
31  <slot />
32</div>
33 
34<script>
35  import { create } from "@data-slot/tabs"
36 
37  create()
38</script>