feat: header now use user info

package.json

@@ -60,6 +60,7 @@
     "cookies-next": "^2.1.1",
     "dayjs": "^1.11.7",
     "embla-carousel-react": "^7.1.0",
+    "lodash": "^4.17.21",
     "next": "13.1.4",
     "next-auth": "^4.20.1",
     "pocketbase": "^0.10.2",
@@ -89,6 +90,7 @@
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@types/lodash": "^4.14.192",
     "@types/micromatch": "^4.0.2",
     "@types/prettier": "^2.7.2",
     "@types/testing-library__jest-dom": "^5.14.5",

src/components/layout/Layout.tsx

@@ -0,0 +1,15 @@
+import HeaderSearch from "./header/Header";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <HeaderSearch />
+      {children}
+    </>
+  );
+};
+export default Layout;

src/components/layout/header/AccountHeaderMenu.tsx

@@ -0,0 +1,72 @@
+import { api } from "@/utils/api";
+import { Avatar, Button, Menu } from "@mantine/core";
+import {
+  IconHomeSignal,
+  IconLogout,
+  IconMessageCircle,
+  IconSettings,
+} from "@tabler/icons-react";
+import { signIn, signOut, useSession } from "next-auth/react";
+import Link from "next/link";
+
+const AccountHeaderMenu = () => {
+  const { data: sessionData } = useSession();
+  const { data: userInfo } = api.user.getMyHeaderInfo.useQuery(
+    undefined, // no input
+    { enabled: sessionData?.user !== undefined }
+  );
+  const id = userInfo?.id.toString();
+  const menu = (
+    <Menu>
+      <Menu.Target>
+        {userInfo?.image ? (
+          <Avatar component="button" src={userInfo.image} radius="xl" />
+        ) : (
+          <Avatar component="button">
+            {userInfo?.name?.slice(0, 2).toUpperCase()}
+          </Avatar>
+        )}
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Label>User Actions</Menu.Label>
+        <Menu.Item
+          icon={<IconSettings size={14} />}
+          component={Link}
+          href="/settings"
+        >
+          Settings
+        </Menu.Item>
+        <Menu.Item
+          icon={<IconMessageCircle size={14} />}
+          component={Link}
+          href="/chat"
+        >
+          Messages
+        </Menu.Item>
+        <Menu.Item
+          icon={<IconHomeSignal size={14} />}
+          component={Link}
+          href={"/profile/" + id!}
+        >
+          Profile
+        </Menu.Item>
+
+        <Menu.Divider />
+
+        <Menu.Item
+          color="red"
+          icon={<IconLogout size={14} />}
+          onClick={() => void signOut()}
+        >
+          Logout
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+  const SignIn = (
+    <Button variant="subtle" onClick={() => void signIn()}></Button>
+  );
+  return sessionData === null ? SignIn : menu;
+};
+
+export default AccountHeaderMenu;