"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
interface TabsContextValue {
value: string
onValueChange: (value: string) => void
}
const TabsContext = React.createContext<TabsContextValue | undefined>(undefined)
interface TabsProps {
defaultValue: string
className?: string
children: React.ReactNode
}
const Tabs = ({ defaultValue, className, children }: TabsProps) => {
const [value, setValue] = React.useState(defaultValue)
return (
<TabsContext.Provider value={{ value, onValueChange: setValue }}>
<div className={cn("w-full", className)}>{children}</div>
</TabsContext.Provider>
)
}
const TabsList = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className
)}
{...props}
/>
))
TabsList.displayName = "TabsList"
interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
value: string
}
const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
({ className, value, onClick, ...props }, ref) => {
const context = React.useContext(TabsContext)
if (!context) throw new Error("TabsTrigger must be used within Tabs")
const isActive = context.value === value
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
context.onValueChange(value)
onClick?.(e)
}
return (
<button
ref={ref}
type="button"
onClick={handleClick}
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-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className
)}
{...props}
/>
)
}
)
TabsTrigger.displayName = "TabsTrigger"
interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
value: string
}
const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
({ className, value, ...props }, ref) => {
const context = React.useContext(TabsContext)
if (!context) throw new Error("TabsContent must be used within Tabs")
if (context.value !== value) return null
return (
<div
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
)}
{...props}
/>
)
}
)
TabsContent.displayName = "TabsContent"
export { Tabs, TabsList, TabsTrigger, TabsContent }
