Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.5 kB · 46 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { theme } from "tailwind.config";
export const Toggle = (props: { toggle: boolean; fullWidth?: boolean; onToggle: () => void; disabledColor1?: string; disabledColor2?: string; children: React.ReactNode;}) => { return ( <button type="button" className={`toggle flex gap-2 text-left ${props.fullWidth ? "justify-between flex-row-reverse" : "items-start justify-start "}`} onClick={() => { props.onToggle(); }} > <div className="h-6 flex place-items-center"> <div className="selected-outline transparent-outline flex items-center h-[20px] w-6 rounded-md border-border" style={{ border: props.toggle ? "1px solid " + theme.colors["accent-2"] : "1px solid " + props.disabledColor2 || theme.colors["border-light"], justifyContent: props.toggle ? "flex-end" : "flex-start", background: props.toggle ? theme.colors["accent-1"] : props.disabledColor1 || theme.colors["tertiary"], }} > <div className="h-[14px] w-[10px] m-0.5 rounded-[2px]" style={{ background: props.toggle ? theme.colors["accent-2"] : props.disabledColor2 || theme.colors["border-light"], }} /> </div> </div> {props.children} </button> );};