feat(editor): ✨ Team workspaces

apps/builder/components/dashboard/WorkspaceSettingsModal/WorkspaceSettingsModal.tsx

@@ -0,0 +1,157 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  Stack,
+  Text,
+  Button,
+  Avatar,
+  Flex,
+} from '@chakra-ui/react'
+import {
+  CreditCardIcon,
+  HardDriveIcon,
+  SettingsIcon,
+  UsersIcon,
+} from 'assets/icons'
+import { EmojiOrImageIcon } from 'components/shared/EmojiOrImageIcon'
+import { useWorkspace } from 'contexts/WorkspaceContext'
+import { User, Workspace } from 'db'
+import { useState } from 'react'
+import { BillingForm } from './BillingForm'
+import { MembersList } from './MembersList'
+import { MyAccountForm } from './MyAccountForm'
+import { EditorSettings } from './UserSettingsForm'
+import { WorkspaceSettingsForm } from './WorkspaceSettingsForm'
+
+type Props = {
+  isOpen: boolean
+  user: User
+  workspace: Workspace
+  onClose: () => void
+}
+
+type SettingsTab =
+  | 'my-account'
+  | 'user-settings'
+  | 'workspace-settings'
+  | 'members'
+  | 'billing'
+
+export const WorkspaceSettingsModal = ({
+  isOpen,
+  user,
+  workspace,
+  onClose,
+}: Props) => {
+  const { canEdit } = useWorkspace()
+  const [selectedTab, setSelectedTab] = useState<SettingsTab>('my-account')
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl">
+      <ModalOverlay />
+      <ModalContent h="600px" flexDir="row">
+        <Stack spacing={8} w="250px" py="6" borderRightWidth={1} h="full">
+          <Stack>
+            <Text pl="4" color="gray.500">
+              {user.email}
+            </Text>
+            <Button
+              variant={selectedTab === 'my-account' ? 'solid' : 'ghost'}
+              onClick={() => setSelectedTab('my-account')}
+              leftIcon={
+                <Avatar
+                  name={user.name ?? undefined}
+                  src={user.image ?? undefined}
+                  boxSize="15px"
+                />
+              }
+              size="sm"
+              justifyContent="flex-start"
+              pl="4"
+            >
+              My account
+            </Button>
+            <Button
+              variant={selectedTab === 'user-settings' ? 'solid' : 'ghost'}
+              onClick={() => setSelectedTab('user-settings')}
+              leftIcon={<SettingsIcon />}
+              size="sm"
+              justifyContent="flex-start"
+              pl="4"
+            >
+              Preferences
+            </Button>
+          </Stack>
+          <Stack>
+            <Text pl="4" color="gray.500">
+              Workspace
+            </Text>
+            {canEdit && (
+              <Button
+                variant={
+                  selectedTab === 'workspace-settings' ? 'solid' : 'ghost'
+                }
+                onClick={() => setSelectedTab('workspace-settings')}
+                leftIcon={
+                  <EmojiOrImageIcon
+                    icon={workspace.icon}
+                    boxSize="15px"
+                    defaultIcon={HardDriveIcon}
+                  />
+                }
+                size="sm"
+                justifyContent="flex-start"
+                pl="4"
+              >
+                Settings
+              </Button>
+            )}
+            <Button
+              variant={selectedTab === 'members' ? 'solid' : 'ghost'}
+              onClick={() => setSelectedTab('members')}
+              leftIcon={<UsersIcon />}
+              size="sm"
+              justifyContent="flex-start"
+              pl="4"
+            >
+              Members
+            </Button>
+            {canEdit && (
+              <Button
+                variant={selectedTab === 'billing' ? 'solid' : 'ghost'}
+                onClick={() => setSelectedTab('billing')}
+                leftIcon={<CreditCardIcon />}
+                size="sm"
+                justifyContent="flex-start"
+                pl="4"
+              >
+                Billing
+              </Button>
+            )}
+          </Stack>
+        </Stack>
+        <Flex flex="1" p="10">
+          <SettingsContent tab={selectedTab} />
+        </Flex>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const SettingsContent = ({ tab }: { tab: SettingsTab }) => {
+  switch (tab) {
+    case 'my-account':
+      return <MyAccountForm />
+    case 'user-settings':
+      return <EditorSettings />
+    case 'workspace-settings':
+      return <WorkspaceSettingsForm />
+    case 'members':
+      return <MembersList />
+    case 'billing':
+      return <BillingForm />
+    default:
+      return null
+  }
+}