1 files changed, 31 insertions, 0 deletions
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>
+  )
+}