File size: 2,361 Bytes
5301ae9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import * as React from "react"
import { cn } from "@/lib/utils"
const TabsContext = React.createContext(null)
const Tabs = ({ defaultValue, value, onValueChange, className, children, ...props }) => {
const [internalValue, setInternalValue] = React.useState(defaultValue || "")
const currentValue = value !== undefined ? value : internalValue
const handleValueChange = onValueChange || setInternalValue
return (
<TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
<div className={cn("w-full", className)} {...props}>
{children}
</div>
</TabsContext.Provider>
)
}
const TabsList = React.forwardRef(({ className, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-slate-100 p-1 text-slate-500",
className
)}
{...props}
/>
)
})
TabsList.displayName = "TabsList"
const TabsTrigger = React.forwardRef(({ className, value, ...props }, ref) => {
const context = React.useContext(TabsContext)
const isActive = context?.value === value
return (
<button
ref={ref}
type="button"
onClick={() => context?.onValueChange(value)}
data-state={isActive ? "active" : "inactive"}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
isActive ? "bg-white text-slate-950 shadow-sm" : "text-slate-500 hover:text-slate-950",
className
)}
{...props}
/>
)
})
TabsTrigger.displayName = "TabsTrigger"
const TabsContent = React.forwardRef(({ className, value, ...props }, ref) => {
const context = React.useContext(TabsContext)
const isActive = context?.value === value
if (!isActive) return null
return (
<div
ref={ref}
className={cn(
"mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2",
className
)}
{...props}
/>
)
})
TabsContent.displayName = "TabsContent"
export { Tabs, TabsList, TabsTrigger, TabsContent }
|