Monorepo for wisp.place. A static site hosting service built on top of the AT Protocol.
wisp.place
nekomimi.pet
1import * as React from "react"
2import * as TabsPrimitive from "@radix-ui/react-tabs"
3
4import { cn } from "@public/lib/utils"
5
6function Tabs({
7 className,
8 ...props
9}: React.ComponentProps<typeof TabsPrimitive.Root>) {
10 return (
11 <TabsPrimitive.Root
12 data-slot="tabs"
13 className={cn("flex flex-col gap-2", className)}
14 {...props}
15 />
16 )
17}
18
19function TabsList({
20 className,
21 ...props
22}: React.ComponentProps<typeof TabsPrimitive.List>) {
23 return (
24 <TabsPrimitive.List
25 data-slot="tabs-list"
26 className={cn(
27 "bg-muted dark:bg-muted/80 text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
28 className
29 )}
30 {...props}
31 />
32 )
33}
34
35function TabsTrigger({
36 className,
37 ...props
38}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
39 return (
40 <TabsPrimitive.Trigger
41 data-slot="tabs-trigger"
42 className={cn(
43 "data-[state=active]:bg-background dark:data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-border focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-border dark:data-[state=active]:shadow-sm text-foreground dark:text-muted-foreground/70 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
44 className
45 )}
46 {...props}
47 />
48 )
49}
50
51function TabsContent({
52 className,
53 ...props
54}: React.ComponentProps<typeof TabsPrimitive.Content>) {
55 return (
56 <TabsPrimitive.Content
57 data-slot="tabs-content"
58 className={cn("outline-none", className)}
59 {...props}
60 />
61 )
62}
63
64export { Tabs, TabsList, TabsTrigger, TabsContent }