feat(inputs): ✨ Add text options

apps/builder/components/shared/DebouncedInput.tsx

@@ -0,0 +1,31 @@
+import { Input, InputProps } from '@chakra-ui/react'
+import { ChangeEvent, useEffect, useState } from 'react'
+import { useDebounce } from 'use-debounce'
+
+type Props = Omit<InputProps, 'onChange' | 'value'> & {
+  delay: number
+  initialValue: string
+  onChange: (debouncedValue: string) => void
+}
+
+export const DebouncedInput = ({
+  delay,
+  onChange,
+  initialValue,
+  ...props
+}: Props) => {
+  const [currentValue, setCurrentValue] = useState(initialValue)
+  const [currentValueDebounced] = useDebounce(currentValue, delay)
+
+  useEffect(() => {
+    if (currentValueDebounced === initialValue) return
+    onChange(currentValueDebounced)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentValueDebounced])
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setCurrentValue(e.target.value)
+  }
+
+  return <Input {...props} value={currentValue} onChange={handleChange} />
+}

apps/builder/components/shared/SwitchWithLabel.tsx

@@ -0,0 +1,30 @@
+import { FormLabel, HStack, Switch, SwitchProps } from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+type SwitchWithLabelProps = {
+  label: string
+  initialValue: boolean
+  onCheckChange: (isChecked: boolean) => void
+} & SwitchProps
+
+export const SwitchWithLabel = ({
+  label,
+  initialValue,
+  onCheckChange,
+  ...props
+}: SwitchWithLabelProps) => {
+  const [isChecked, setIsChecked] = useState(initialValue)
+
+  const handleChange = () => {
+    setIsChecked(!isChecked)
+    onCheckChange(!isChecked)
+  }
+  return (
+    <HStack justifyContent="space-between">
+      <FormLabel htmlFor={props.id} mb="0">
+        {label}
+      </FormLabel>
+      <Switch isChecked={isChecked} onChange={handleChange} {...props} />
+    </HStack>
+  )
+}