Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
2.1 kB · 81 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182import { useCardBorderHidden } from "./Pages/useCardBorderHidden";import { ToggleWithLabel } from "./Toggle";
export function SettingsPageLayout(props: { children: React.ReactNode; className?: string;}) { return ( <div className={`flex flex-col gap-6 w-full pb-8 ${props.className || ""}`}> {props.children} </div> );}
export function SettingsSection(props: { className?: string; title?: React.ReactNode; children: React.ReactNode; action?: React.ReactNode; accent?: boolean;}) { let cardBorderHidden = useCardBorderHidden(); return ( <div className={`${props.accent ? "accent-container" : cardBorderHidden ? "light-container" : "opaque-container"} flex flex-col gap-2 p-3 pb-4 sm:px-4 ${props.className || ""}`} > <div className="flex justify-between items-center"> {props.title && <h3>{props.title}</h3>} {props.action && props.action} </div> <div className="flex flex-col gap-4 text-secondary leading-snug"> {props.children} </div> </div> );}
export const InputSetting = (props: { children: React.ReactNode; label: string; optional?: boolean; helpText?: React.ReactNode; htmlFor?: string;}) => { return ( <label htmlFor={props.htmlFor} className="setting flex flex-col gap-1 md:flex-row md:gap-4" > <p className="md:basis-1/4 shrink-0 mt-1 text-secondary font-bold "> {props.label}{" "} {props.optional && <span className="font-normal">(optional)</span>} </p> <div className="flex flex-col grow min-w-0"> {props.children} {props.helpText && ( <p className="text-sm text-tertiary pt-0">{props.helpText}</p> )} </div> </label> );};
export const ToggleSetting = (props: { toggle: boolean; onToggle: () => void; label: string; helpText?: React.ReactNode;}) => { return ( <> <ToggleWithLabel label={props.label} helpText={props.helpText} toggle={props.toggle} onToggle={props.onToggle} /> <hr className="last:hidden border-border-light" /> </> );};