A more featured navbar

src/components/layout/Navbar.tsx

@@ -1,5 +1,12 @@
 import Link from "next/link";
 import { Button } from "../ui/button";
+import {
+  BellIcon,
+  ChevronDownIcon,
+  StarIcon,
+  UserIcon,
+  WalletIcon,
+} from "lucide-react";
 
 const links = [
   {
@@ -25,7 +32,7 @@ export default function Navbar() {
             <li key={l.path}>
               <Link
                 href={l.path}
-                className="px-3 py-2 rounded-sm hover:bg-primary/20 hover:text-primary transition-colors duration-300"
+                className="px-3 py-2 rounded-lg hover:bg-primary/20 hover:text-primary transition-colors duration-300"
               >
                 {l.name}
               </Link>
@@ -33,6 +40,41 @@ export default function Navbar() {
           ))}
         </ul>
       </div>
+      <div className="ml-auto flex gap-4">
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square"
+        >
+          <StarIcon />
+        </Button>
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square"
+        >
+          <BellIcon />
+        </Button>
+      </div>
+      <div className="flex gap-4">
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square group"
+        >
+          <div className="flex gap-1 items-center h-full">
+            <WalletIcon />
+            3.13
+            <span className="w-[1.5px] h-full ml-1 mr-1 bg-border group-hover:bg-accent-foreground animate-colors duration-300" />
+            $248
+            <ChevronDownIcon />
+          </div>
+        </Button>
+
+        <Button
+          variant="outline"
+          className="rounded-full bg-card p-2! aspect-square"
+        >
+          <UserIcon />
+        </Button>
+      </div>
     </nav>
   );
 }