diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-09-21 19:56:17 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-09-21 19:56:17 +0200 |
commit | 536a2adce1ef860ddce1707224c8b10aaf509f60 (patch) | |
tree | 0e6fd545db1dae6e3146e47f756fcdb912d0e123 /components | |
parent | 0075ab72d04b9e640c724de886a197694e6ed5ca (diff) |
chore: separated out more components
Diffstat (limited to 'components')
-rw-r--r-- | components/tweaks.tsx | 80 |
1 files changed, 3 insertions, 77 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx index 686f9b8..b19ff75 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -62,6 +62,9 @@ import { ColorMenu } from './ColorMenu' import { ThemeContext } from '../util/themecontext' import { usePersistantState } from '../util/persistant-state' +import { SliderWithInfo } from './SliderWithInfo' +import { EnableSection } from './EnableSection' +import { InfoTooltip } from './InfoTooltip' export interface TweakProps { physics: typeof initialPhysics @@ -1262,83 +1265,6 @@ export const Tweaks = (props: TweakProps) => { ) } -export interface InfoTooltipProps { - infoText?: string | boolean -} -export const InfoTooltip = (props: InfoTooltipProps) => { - const { infoText } = props - return ( - <Box paddingLeft="1"> - <Tooltip label={infoText} placement="top" color="gray.100" bg="gray.800" hasArrow> - <InfoOutlineIcon /> - </Tooltip> - </Box> - ) -} -export interface SliderWithInfoProps { - min?: number - max?: number - step?: number - value: number - onChange: (arg0: number) => void - label: string - infoText?: string -} -export const SliderWithInfo = ({ - min = 0, - max = 10, - step = 0.1, - value = 1, - ...rest -}: SliderWithInfoProps) => { - const { onChange, label, infoText } = rest - const { highlightColor } = useContext(ThemeContext) - return ( - <Box key={label}> - <Box display="flex" alignItems="flex-end"> - <Text>{label}</Text> - {infoText && <InfoTooltip infoText={infoText} />} - </Box> - <Slider value={value} onChange={onChange} min={min} max={max} step={step}> - <SliderTrack> - <SliderFilledTrack /> - </SliderTrack> - <Tooltip bg={highlightColor} label={value.toFixed(1)}> - <SliderThumb bg="white" /> - </Tooltip> - </Slider> - </Box> - ) -} - -export interface EnableSectionProps { - label: string - value: boolean | number - onChange: () => void - infoText?: string - children: React.ReactNode -} - -export const EnableSection = (props: EnableSectionProps) => { - const { value, onChange, label, infoText, children } = props - return ( - <Box paddingTop={2} key={label}> - <Box display="flex" justifyContent="space-between" paddingBottom={2}> - <Box display="flex" alignItems="center"> - <Text>{label}</Text> - {infoText && <InfoTooltip infoText={infoText} />} - </Box> - <Switch isChecked={!!value} onChange={onChange} /> - </Box> - <Collapse in={!!value} animateOpacity> - <Box paddingLeft={4} paddingTop={2} paddingBottom={2}> - {children} - </Box> - </Collapse> - </Box> - ) -} - export interface DropDownMenuProps { textArray: string[] onClickArray: (() => void)[] |