From 6d444a668c7332ae160f8025646915e7e813fb1e Mon Sep 17 00:00:00 2001
From: anonefdora <musaeleazar090@gmail.com>
Date: Sat, 14 Dec 2024 14:08:56 +0100
Subject: [PATCH] feat: create navbar profile component #3

---
 src/components/social-sphere-sidebar.tsx | 17 ++----------
 src/components/ui/profile.tsx            | 35 ++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ui/profile.tsx

diff --git a/src/components/social-sphere-sidebar.tsx b/src/components/social-sphere-sidebar.tsx
index 66457c0..1379a06 100644
--- a/src/components/social-sphere-sidebar.tsx
+++ b/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>
   )
 }
-
diff --git a/src/components/ui/profile.tsx b/src/components/ui/profile.tsx
new file mode 100644
index 0000000..86bd54e
--- /dev/null
+++ b/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;