konnosDashboard
ConnectTabs.tsx62 lines · main
1import { FileJson2 } from 'lucide-react'
2import { isValidElement, ReactNode } from 'react'
3import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
4
5interface ConnectTabTriggerProps {
6 value: string
7}
8interface ConnectTabTriggersProps {
9 children: ReactNode[]
10}
11
12interface ConnectFileTabProps {
13 children: ReactNode[]
14 value?: string
15 onValueChange?: (value: string) => void
16}
17
18interface ConnectTabContentProps {
19 children: ReactNode
20 value: string
21}
22export const ConnectTabs = ({ children, value, onValueChange }: ConnectFileTabProps) => {
23 const firstChild = children[0]
24
25 const defaultValue = isValidElement(firstChild)
26 ? (firstChild.props as any)?.children[0]?.props?.value || ''
27 : null
28
29 return (
30 <Tabs_Shadcn_ defaultValue={defaultValue} value={value} onValueChange={onValueChange}>
31 {children}
32 </Tabs_Shadcn_>
33 )
34}
35
36export const ConnectTabTrigger = ({ value }: ConnectTabTriggerProps) => {
37 return (
38 <TabsTrigger_Shadcn_
39 value={value}
40 className="flex items-center gap-1 text-xs px-0 data-[state=active]:bg-transparent py-2.5"
41 >
42 <FileJson2 size={15} className="text-foreground-muted" />
43 {value}
44 </TabsTrigger_Shadcn_>
45 )
46}
47
48export const ConnectTabTriggers = ({ children }: ConnectTabTriggersProps) => {
49 return (
50 <TabsList_Shadcn_ className="bg-surface-100 px-5 rounded-lg rounded-b-none gap-5">
51 {children}
52 </TabsList_Shadcn_>
53 )
54}
55
56export const ConnectTabContent = ({ value, children }: ConnectTabContentProps) => {
57 return (
58 <TabsContent_Shadcn_ value={value} className="p-3 mt-1 max-h-72 overflow-scroll">
59 {children}
60 </TabsContent_Shadcn_>
61 )
62}