feat(editor): ✨ Zoom in/out

apps/builder/components/editor/EditorSettingsModal.tsx

@@ -0,0 +1,97 @@
+import {
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Stack,
+  Text,
+  Radio,
+  VStack,
+  RadioGroup,
+  HStack,
+} from '@chakra-ui/react'
+import { LaptopIcon, MouseIcon } from 'assets/icons'
+import { useUser } from 'contexts/UserContext'
+import { GraphNavigation } from 'db'
+import React, { useEffect, useState } from 'react'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalBody pt="12" pb="8" px="8">
+          <EditorSettings />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const EditorSettings = () => {
+  const { user, saveUser } = useUser()
+  const [value, setValue] = useState<string>(
+    user?.graphNavigation ?? GraphNavigation.TRACKPAD
+  )
+
+  useEffect(() => {
+    if (user?.graphNavigation === value) return
+    saveUser({ graphNavigation: value as GraphNavigation }).then()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  const options = [
+    {
+      value: GraphNavigation.MOUSE,
+      label: 'Mouse',
+      description:
+        'Move by dragging the board and zoom in/out using the scroll wheel',
+      icon: <MouseIcon boxSize="35px" />,
+    },
+    {
+      value: GraphNavigation.TRACKPAD,
+      label: 'Trackpad',
+      description: 'Move the board using 2 fingers and zoom in/out by pinching',
+      icon: <LaptopIcon boxSize="35px" />,
+    },
+  ]
+
+  return (
+    <Stack spacing={4}>
+      <Heading size="md">Navigation</Heading>
+      <RadioGroup onChange={setValue} value={value}>
+        <HStack spacing={4} w="full">
+          {options.map((option) => (
+            <VStack
+              key={option.value}
+              as="label"
+              htmlFor={option.label}
+              cursor="pointer"
+              borderWidth="1px"
+              borderRadius="md"
+              w="full"
+              p="6"
+              spacing={6}
+            >
+              {option.icon}
+              <Stack>
+                <Text fontWeight="bold">{option.label}</Text>
+                <Text>{option.description}</Text>
+              </Stack>
+
+              <Radio value={option.value} id={option.label} />
+            </VStack>
+          ))}
+        </HStack>
+      </RadioGroup>
+    </Stack>
+  )
+}