✨ Add webhook blocks API public endpoints

apps/builder/src/features/workspace/components/WorkspaceDropdown.tsx

@@ -0,0 +1,98 @@
+import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
+import {
+  HardDriveIcon,
+  ChevronLeftIcon,
+  PlusIcon,
+  LogOutIcon,
+} from '@/components/icons'
+import { PlanTag } from '@/features/billing'
+import { trpc } from '@/lib/trpc'
+import {
+  Menu,
+  MenuButton,
+  Button,
+  HStack,
+  SkeletonCircle,
+  MenuList,
+  MenuItem,
+  Text,
+} from '@chakra-ui/react'
+import { Workspace } from 'models'
+
+type Props = {
+  currentWorkspace?: Workspace
+  onWorkspaceSelected: (workspaceId: string) => void
+  onCreateNewWorkspaceClick: () => void
+  onLogoutClick: () => void
+}
+
+export const WorkspaceDropdown = ({
+  currentWorkspace,
+  onWorkspaceSelected,
+  onLogoutClick,
+  onCreateNewWorkspaceClick,
+}: Props) => {
+  const { data } = trpc.workspace.listWorkspaces.useQuery()
+
+  const workspaces = data?.workspaces ?? []
+
+  return (
+    <Menu placement="bottom-end">
+      <MenuButton as={Button} variant="outline" px="2">
+        <HStack>
+          <SkeletonCircle
+            isLoaded={currentWorkspace !== undefined}
+            alignItems="center"
+            display="flex"
+            boxSize="20px"
+          >
+            <EmojiOrImageIcon
+              boxSize="20px"
+              icon={currentWorkspace?.icon}
+              defaultIcon={HardDriveIcon}
+            />
+          </SkeletonCircle>
+          {currentWorkspace && (
+            <>
+              <Text noOfLines={1} maxW="200px">
+                {currentWorkspace.name}
+              </Text>
+              <PlanTag plan={currentWorkspace.plan} />
+            </>
+          )}
+          <ChevronLeftIcon transform="rotate(-90deg)" />
+        </HStack>
+      </MenuButton>
+      <MenuList>
+        {workspaces
+          ?.filter((workspace) => workspace.id !== currentWorkspace?.id)
+          .map((workspace) => (
+            <MenuItem
+              key={workspace.id}
+              onClick={() => onWorkspaceSelected(workspace.id)}
+            >
+              <HStack>
+                <EmojiOrImageIcon
+                  icon={workspace.icon}
+                  boxSize="16px"
+                  defaultIcon={HardDriveIcon}
+                />
+                <Text>{workspace.name}</Text>
+                <PlanTag plan={workspace.plan} />
+              </HStack>
+            </MenuItem>
+          ))}
+        <MenuItem onClick={onCreateNewWorkspaceClick} icon={<PlusIcon />}>
+          New workspace
+        </MenuItem>
+        <MenuItem
+          onClick={onLogoutClick}
+          icon={<LogOutIcon />}
+          color="orange.500"
+        >
+          Log out
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  )
+}