Add Dashboard

apps/builder/components/dashboard/DashboardHeader.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import {
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Text,
+  HStack,
+  Flex,
+  Avatar,
+  SkeletonCircle,
+  Skeleton,
+} from '@chakra-ui/react'
+import { TypebotLogo } from 'assets/logos'
+import { useUser } from 'services/user'
+import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
+import { LogOutIcon, SettingsIcon } from 'assets/icons'
+import { signOut } from 'next-auth/react'
+
+export const DashboardHeader = () => {
+  const user = useUser()
+
+  const handleLogOut = () => {
+    signOut()
+  }
+
+  return (
+    <Flex w="full" borderBottomWidth="1px" justify="center">
+      <Flex
+        justify="space-between"
+        alignItems="center"
+        h="16"
+        maxW="1000px"
+        flex="1"
+      >
+        <NextChakraLink
+          className="w-24"
+          href="/typebots"
+          data-testid="authenticated"
+        >
+          <TypebotLogo w="30px" />
+        </NextChakraLink>
+        <Menu>
+          <MenuButton>
+            <HStack>
+              <Skeleton isLoaded={user !== undefined}>
+                <Text>{user?.name}</Text>
+              </Skeleton>
+              <SkeletonCircle isLoaded={user !== undefined}>
+                <Avatar
+                  boxSize="35px"
+                  name={user?.name ?? undefined}
+                  src={user?.image ?? undefined}
+                />
+              </SkeletonCircle>
+            </HStack>
+          </MenuButton>
+          <MenuList>
+            <MenuItem
+              as={NextChakraLink}
+              href="/account"
+              icon={<SettingsIcon />}
+            >
+              My account
+            </MenuItem>
+            <MenuItem onClick={handleLogOut} icon={<LogOutIcon />}>
+              Log out
+            </MenuItem>
+          </MenuList>
+        </Menu>
+      </Flex>
+    </Flex>
+  )
+}