feat: create navbar profile component ZencypherSolutions#3

src/components/social-sphere-sidebar.tsx

@@ -15,6 +15,7 @@ import {
   SidebarMenuItem,
   SidebarRail,
 } from "@/components/ui/sidebar"
+import Profile from './ui/profile'
 
 export function SocialSphereSidebar() {
   return (
@@ -62,22 +63,8 @@ export function SocialSphereSidebar() {
           </SidebarMenuItem>
         </SidebarMenu>
       </SidebarContent>
-      <SidebarFooter className="mt-auto border-t p-4">
-        <Button
-          variant="ghost"
-          className="w-full justify-start gap-2 bg-[#2c5154] text-white hover:bg-[#3d4f59] hover:text-white rounded-full"
-        >
-          <Avatar className="h-6 w-6">
-            <AvatarImage src="/placeholder.svg" />
-            <AvatarFallback>
-              <User2 className="h-4 w-4" />
-            </AvatarFallback>
-          </Avatar>
-          <span>John Doe</span>
-        </Button>
-      </SidebarFooter>
+      <Profile/>
       <SidebarRail />
     </Sidebar>
   )
 }
-

src/components/ui/profile.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { SidebarFooter } from "@/components/ui/sidebar";
+import { Gem, GemIcon } from "lucide-react";
+
+const Profile = () => {
+  return (
+    <>
+      <SidebarFooter className="mt-auto border-t p-4">
+        <div className="flex items-center text-purple-700 text-xs font-medium gap-2">
+          <GemIcon /> Navbar Profile
+        </div>
+        <Button
+          variant="ghost"
+          className="w-full justify-start gap-2 bg-[#2c5154] text-white hover:bg-[#3d4f59] hover:text-white rounded-full"
+        >
+          <Avatar className="h-6 w-6">
+            <AvatarImage src="/placeholder.svg" />
+            <AvatarFallback>
+              <div className="relative w-full h-full flex items-center justify-center">
+                <div className="absolute w-full h-full bg-white rounded-full"></div>
+                <div className="absolute w-[80%] h-[80%] bg-[#E36C59] rounded-full"></div>
+                <div className="absolute top-[15%] w-[30%] h-[30%] bg-[#232931] rounded-full"></div>
+              </div>
+            </AvatarFallback>
+          </Avatar>
+          <span>John Doe</span>
+        </Button>
+      </SidebarFooter>
+    </>
+  );
+};
+
+export default Profile;