From 075d3831ffae63f128bcaabf9fc5e70ade41ad33 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomas@thomass-air.kpn>
Date: Tue, 21 Sep 2021 21:00:21 +0200
Subject: chore: separated out all tweak panels

---
 components/EnableSection.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 components/EnableSection.tsx

(limited to 'components/EnableSection.tsx')

diff --git a/components/EnableSection.tsx b/components/EnableSection.tsx
new file mode 100644
index 0000000..b7981b3
--- /dev/null
+++ b/components/EnableSection.tsx
@@ -0,0 +1,31 @@
+import { Text, Box, Collapse, Switch } from '@chakra-ui/react'
+import React from 'react'
+import { InfoTooltip } from './InfoTooltip'
+
+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>
+  )
+}
-- 
cgit v1.2.3

