cesium · nunom27 · Jul 7, 2025 · Jul 11, 2025
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@headlessui/react": "^2.2.4",
     "install": "^0.13.0",
-    "next": "15.3.4",
+    "next": "^15.3.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -25,7 +14,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`antialiased`}
       >
         {children}
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,8 @@
+import { UserDropdown } from "@/components/user-dropdown";
+
 export default function Home() {
-  return <div>Home</div>;
+  return <div>
+    Home
+    <UserDropdown />
+    </div>;
 }
diff --git a/src/components/avatar.tsx b/src/components/avatar.tsx
@@ -0,0 +1,43 @@
+import Image from "next/image";
+import React from "react";
+
+interface IAvatarProps {
+  src?: string;
+  name?: string;
+  className?: string;
+}
+
+function getInitials(name: string): string {
+  const names = name.split(" ");
+  if (names.length === 1) {
+    return names[0].charAt(0).toUpperCase();
+  }
+  return (
+    names[0].charAt(0).toUpperCase() +
+    names[names.length - 1].charAt(0).toUpperCase()
+  );
+}
+
+const Avatar = ({ src, name, className }: IAvatarProps) => {
+  return (
+    <figure
+      className={`bg-light overflow-hidden rounded-full ${className || ""}`}
+    >
+      {src ? (
+        <Image
+          src={src}
+          alt="User Avatar"
+          width={34}
+          height={34}
+          className="object-cover"
+        />
+      ) : (
+        <div className="flex size-full min-h-8 min-w-8 items-center justify-center bg-gradient-to-b from-black/20 to-black/40">
+          <span className="text-light">{name && getInitials(name)}</span>
+        </div>
+      )}
+    </figure>
+  );
+};
+
+export default Avatar;
diff --git a/src/components/user-dropdown.tsx b/src/components/user-dropdown.tsx
@@ -0,0 +1,34 @@
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import Avatar from "./avatar";
+
+const UserDropdown = () => {
+  return (
+    <Menu>
+      <MenuButton className="flex items-center gap-2">
+        <span className="text-sm font-semibold">User Name</span>
+      </MenuButton>
+      <MenuItems
+        className="max-w-96 gap-4 rounded-2xl border border-black/10 bg-[#F7F7F7]/50 p-5 shadow-[0px_0px_30px_0px] shadow-black/5 backdrop-blur-xl"
+        anchor="bottom"
+      >
+        <MenuItem as="div" className="flex items-center gap-2">
+          <Avatar className="size-10" name="teste a" />
+          Teste eee
+        </MenuItem>
+        <div className="my-2 border-b border-black/10" />
+        <div className="flex flex-col gap-2">
+          <MenuItem as="div" className="flex items-center gap-2">
+            <span className="material-symbols-outlined">settings</span>
+            Settings
+          </MenuItem>
+          <MenuItem as="div" className="text-danger flex items-center gap-2">
+            <span className="material-symbols-outlined">logout</span>
+            Logout
+          </MenuItem>
+        </div>
+      </MenuItems>
+    </Menu>
+  );
+};
+
+export default UserDropdown;