17 lines
877 B
JavaScript
Executable File
17 lines
877 B
JavaScript
Executable File
import React from "react";
|
|
const Ctx = React.createContext();
|
|
export function Tabs({ defaultValue, children }){
|
|
const [val, setVal] = React.useState(defaultValue);
|
|
return <Ctx.Provider value={{val,setVal}}>{children}</Ctx.Provider>;
|
|
}
|
|
export function TabsList({ className="", ...props }){ return <div className={`inline-flex gap-2 ${className}`} {...props} /> }
|
|
export function TabsTrigger({ value, children, className="" }){
|
|
const { val, setVal } = React.useContext(Ctx);
|
|
const active = val===value;
|
|
return <button className={`px-3 py-1.5 rounded-xl border ${active?"bg-white":"bg-white/60"} ${className}`} onClick={()=>setVal(value)}>{children}</button>;
|
|
}
|
|
export function TabsContent({ value, children, className="" }){
|
|
const { val } = React.useContext(Ctx);
|
|
if (val!==value) return null;
|
|
return <div className={className}>{children}</div>;
|
|
} |