feat: add settings menu

src/components/form/SwitchInput/SwitchInput.tsx

@@ -1,9 +1,11 @@
 import clsx, { type ClassValue } from "clsx";
+import { useTranslation } from "react-i18next";
 import ContentSurface from "@components/surface/ContentSurface";
 import LightSurface from "@components/surface/LightSurface";
 import { motion, type HTMLMotionProps } from "motion/react";
 
 import classes from "./SwitchInput.module.css";
+import tg from "@/tg";
 
 type Props = Omit<HTMLMotionProps<"div">, "className" | "onChange"> & {
   value?: boolean | null;
@@ -12,6 +14,7 @@ type Props = Omit<HTMLMotionProps<"div">, "className" | "onChange"> & {
 };
 
 export default function SwitchInput({ value, onChange, className, ...props }: Props) {
+  const { t } = useTranslation();
   const selectedIndex = value != null ? (value ? 0 : 1) : -1;
 
   return (
@@ -19,24 +22,24 @@ export default function SwitchInput({ value, onChange, className, ...props }: Pr
       {...props}
       className={clsx(classes.container, className)}
       whileTap={{ scale: 1.1 }}
+      onClick={() => {
+        tg.hapticFeedback.click();
+        onChange?.(!value);
+      }}
     >
       <div className={classes.optionsContainer}>
         <div className={classes.options}>
           <motion.button
             type="button"
-            whileTap={{ scale: 0.95 }}
-            onClick={() => onChange?.(true)}
             className={clsx(classes.option, value === true && classes.selected)}
           >
-            on
+            {t("common.on")}
           </motion.button>
           <motion.button
             type="button"
-            whileTap={{ scale: 0.95 }}
-            onClick={() => onChange?.(false)}
             className={clsx(classes.option, value === false && classes.selected)}
           >
-            off
+            {t("common.off")}
           </motion.button>
         </div>
         {selectedIndex >= 0 && (