From 536a2adce1ef860ddce1707224c8b10aaf509f60 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomas@thomass-air.kpn>
Date: Tue, 21 Sep 2021 19:56:17 +0200
Subject: chore: separated out more components

---
 components/tweaks.tsx | 80 ++-------------------------------------------------
 1 file 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)[]
-- 
cgit v1.2.3