返回 oh-my-ppt
Tabs.tsx
根目录 / src / renderer / src / components / ui / Tabs.tsx
1 import * as React from 'react'
2 import * as TabsPrimitive from '@radix-ui/react-tabs'
3 import { cn } from '@renderer/lib/utils'
4
5 export const Tabs = TabsPrimitive.Root
6
7 export const TabsList = React.forwardRef<
8 React.ElementRef<typeof TabsPrimitive.List>,
9 React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
10 >(({ className, ...props }, ref) => (
11 <TabsPrimitive.List
12 ref={ref}
13 className={cn(
14 'inline-flex min-h-11 items-center gap-1 rounded-lg border border-[#d8ccb5]/75 bg-[#fff9ef]/76 p-1 shadow-[inset_0_1px_2px_rgba(77,63,46,0.08)]',
15 className
16 )}
17 {...props}
18 />
19 ))
20 TabsList.displayName = TabsPrimitive.List.displayName
21
22 export const TabsTrigger = React.forwardRef<
23 React.ElementRef<typeof TabsPrimitive.Trigger>,
24 React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
25 >(({ className, ...props }, ref) => (
26 <TabsPrimitive.Trigger
27 ref={ref}
28 className={cn(
29 'inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-4 text-sm font-medium text-muted-foreground transition-colors',
30 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8fbc8f]',
31 'disabled:pointer-events-none disabled:opacity-50',
32 'data-[state=active]:bg-[#dbe7ca] data-[state=active]:text-[#2f3b28] data-[state=active]:shadow-sm',
33 className
34 )}
35 {...props}
36 />
37 ))
38 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39
40 export const TabsContent = React.forwardRef<
41 React.ElementRef<typeof TabsPrimitive.Content>,
42 React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 >(({ className, ...props }, ref) => (
44 <TabsPrimitive.Content
45 ref={ref}
46 className={cn(
47 'mt-6 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8fbc8f]',
48 className
49 )}
50 {...props}
51 />
52 ))
53 TabsContent.displayName = TabsPrimitive.Content.displayName
54
54 lines Plain Text