File size: 2,762 Bytes
3bb94b1 |
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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import * as React from "react"
import { cn } from "../../lib/utils"
const TabContext = React.createContext({
selectedTab: '',
setSelectedTab: () => {}
})
const Tabs = React.forwardRef(({ defaultValue, value, onValueChange, className, children, ...props }, ref) => {
const [selectedTab, setSelectedTab] = React.useState(value || defaultValue);
React.useEffect(() => {
if (value !== undefined) {
setSelectedTab(value);
}
}, [value]);
const handleTabChange = (newValue) => {
if (value === undefined) {
setSelectedTab(newValue);
}
onValueChange?.(newValue);
};
return (
<TabContext.Provider value={{ selectedTab, setSelectedTab: handleTabChange }}>
<div ref={ref} className={cn("w-full", className)} {...props}>
{children}
</div>
</TabContext.Provider>
);
});
Tabs.displayName = "Tabs"
const TabsList = React.forwardRef(({ 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"
const TabsTrigger = React.forwardRef(({ className, value, children, ...props }, ref) => {
const { selectedTab, setSelectedTab } = React.useContext(TabContext);
const isSelected = selectedTab === value;
return (
<button
ref={ref}
type="button"
role="tab"
aria-selected={isSelected}
data-state={isSelected ? "active" : "inactive"}
onClick={() => setSelectedTab(value)}
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",
isSelected && "bg-background text-foreground shadow-sm",
className
)}
{...props}
>
{children}
</button>
);
});
TabsTrigger.displayName = "TabsTrigger"
const TabsContent = React.forwardRef(({ className, value, children, ...props }, ref) => {
const { selectedTab } = React.useContext(TabContext);
const isSelected = selectedTab === value;
if (!isSelected) return null;
return (
<div
ref={ref}
role="tabpanel"
data-state={isSelected ? "active" : "inactive"}
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}
>
{children}
</div>
);
});
TabsContent.displayName = "TabsContent"
export { Tabs, TabsList, TabsTrigger, TabsContent } |