upating nabar

moovendhan-v · Apr 22, 2024 · 3aa5878 · 3aa5878
1 parent dd10c86
commit 3aa5878
Show file tree

Hide file tree

Showing 11 changed files with 349 additions and 103 deletions.
diff --git a/ui_tailwind_shadecn/src/App.tsx b/ui_tailwind_shadecn/src/App.tsx
@@ -13,9 +13,10 @@ import SettingsAppearancePage from '@/screens/settings/appearance/page'
 import SettingsDisplayPage from '@/screens/settings/display/page'
 import SettingsLayout from '@/screens/settings/layout'
 import AboutUs from '@/screens/AboutUs';
-import { Login } from './screens/Auth/Login';
+import { Login } from '@/screens/Auth/Login';
 import { useEffect } from 'react';
-import {useLoginStore} from "@/store/Auth"
+import { useLoginStore, useLoginUserInfo } from "@/store/Auth"
+import { Profile } from './screens/Profile/Profile';
 
 function App() {
    const urlParams = new URLSearchParams(window.location.search);
@@ -38,7 +39,8 @@ function App() {
           window.localStorage.setItem('githubOAuthState', data.response.user);
           window.localStorage.setItem('user', data.response.user.id);
           window.localStorage.setItem('token', data.response.token);
-
+          useLoginStore.setState({isLogin: true});
+          useLoginUserInfo.setState(data.response.user)
         })
         .catch(error => {
           console.error('GitHub authentication error:', error);
@@ -68,6 +70,7 @@ function App() {
           <Route path="/settings/:menu" element={<SettingsLayout children={<SettingsProfilePage />} />} />
           <Route path="/aboutus" element={<AboutUs />} />
           <Route path="/login" element={<Login />} />
+          <Route path="/profile" element={<Profile />} />
 
 
 

diff --git a/...decn/src/components/custom_ui/MainNav.tsx → ...c/components/custom_ui/NavBar/MainNav.tsx b/...decn/src/components/custom_ui/MainNav.tsx → ...c/components/custom_ui/NavBar/MainNav.tsx
@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/navigation-menu"
 
 import {
-    CircleUser,
     Menu,
     Search
 } from "lucide-react"
@@ -20,8 +19,6 @@ import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 
@@ -32,12 +29,18 @@ import { Link } from "react-router-dom"
 import { Input } from "@/components/ui/input"
 
 import { Logo } from "@/components/custom_ui/Svg"
-import { Button } from "../ui/button"
+import { Button } from "../../ui/button"
+import { NavProfile } from "./NavProfile"
 
+// import { useLoginStore, useLoginUserInfo } from "@/store/Auth"
 
-export default function MainNav(){
+
+export default function MainNav() {
 
     const { setTheme } = useTheme()
+    // const user = useLoginStore((state) => state.isLogin);
+    // const userInfo = useLoginUserInfo((state) => state);
+
 
     return (
         <>
@@ -123,23 +126,23 @@ export default function MainNav(){
                         <nav className="grid gap-6 text-lg font-medium">
                             <Logo />
                             <Link
-                        to={`/`}
-                        className="text-foreground transition-colors hover:text-foreground"
-                    >
-                        UiComponents
-                    </Link>
-                    <Link
-                        to={`/${"all"}`}
-                        className="text-muted-foreground transition-colors hover:text-foreground"
-                    >
-                        AllComponents
-                    </Link>
-                    <Link
-                        to={`/${"aboutus"}`}
-                        className="text-muted-foreground transition-colors hover:text-foreground"
-                    >
-                        AboutUs
-                    </Link>
+                                to={`/`}
+                                className="text-foreground transition-colors hover:text-foreground"
+                            >
+                                UiComponents
+                            </Link>
+                            <Link
+                                to={`/${"all"}`}
+                                className="text-muted-foreground transition-colors hover:text-foreground"
+                            >
+                                AllComponents
+                            </Link>
+                            <Link
+                                to={`/${"aboutus"}`}
+                                className="text-muted-foreground transition-colors hover:text-foreground"
+                            >
+                                AboutUs
+                            </Link>
                         </nav>
                     </SheetContent>
                 </Sheet>
@@ -174,26 +177,8 @@ export default function MainNav(){
                             </DropdownMenuItem>
                         </DropdownMenuContent>
                     </DropdownMenu>
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button variant="secondary" size="icon" className="rounded-full">
-                                <CircleUser className="h-5 w-5" />
-                                <span className="sr-only">Toggle user menu</span>
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                            <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem>
-                                <Link to={`/settings`}>
-                                Settings
-                                    </Link>
-                                </DropdownMenuItem>
-                            <DropdownMenuItem>Support</DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem>Logout</DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
+
+                 <NavProfile />
                 </div>
             </header>
         </>

diff --git a/ui_tailwind_shadecn/src/components/custom_ui/NavBar/NavProfile.tsx b/ui_tailwind_shadecn/src/components/custom_ui/NavBar/NavProfile.tsx
@@ -0,0 +1,64 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+import {
+    CircleUser
+} from "lucide-react"
+import { Button } from "../../ui/button"
+import { useLoginStore, useLoginUserInfo } from "@/store/Auth"
+import { Link } from "react-router-dom"
+
+export const NavProfile = ()=>{
+    const user = useLoginStore((state) => state.isLogin);
+    const userInfo = useLoginUserInfo((state) => state);
+    return(
+        <>
+           <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="secondary" size="icon" className="rounded-full">
+                                {user? <> 
+                                    <Avatar>
+                                            <AvatarImage src={userInfo.avatar_url || "Please login"} />
+                                            <AvatarFallback>Profile</AvatarFallback>
+                                    </Avatar>
+                                 </>:<CircleUser className="h-5 w-5" />}
+                                <span className="sr-only">Toggle user menu</span>
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Info</DropdownMenuLabel>
+                            <DropdownMenuSeparator />
+                            {
+                                user ?
+                                    <DropdownMenuItem>
+                                        <Link to={`/profile`}>
+                                            {userInfo.name}
+                                        </Link>
+                                    </DropdownMenuItem>
+                                : <></>
+                            }
+                            <DropdownMenuItem>
+                                <Link to={`/settings`}>
+                                    Settings
+                                </Link>
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem>
+                                <Link to={`/${user ? "Logout" : "Login"}`}>
+                                    {user ? "Logout" : "Login"}
+                                </Link>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+
+                    </>
+    )
+}
diff --git a/ui_tailwind_shadecn/src/screens/AboutUs.tsx b/ui_tailwind_shadecn/src/screens/AboutUs.tsx
@@ -1,4 +1,4 @@
-import MainNav from "@/components/custom_ui/MainNav"
+import MainNav from "@/components/custom_ui/NavBar/MainNav"
 import ScroolCardReveal from "@/components/custom_ui/ScroolCardReveal"
 
 

diff --git a/ui_tailwind_shadecn/src/screens/Auth/Login.tsx b/ui_tailwind_shadecn/src/screens/Auth/Login.tsx
@@ -1,7 +1,7 @@
 
 import { MovingButton } from "@/components/ui/moving-border"
 import { Checkbox } from "@/components/ui/checkbox"
-import MainNav from "@/components/custom_ui/MainNav"
+import MainNav from "@/components/custom_ui/NavBar/MainNav"
 import { useLocation } from 'react-router-dom';
 import { useEffect } from "react";
 import {HandleLogin} from '@/hooks/handle_login.hooks';

diff --git a/ui_tailwind_shadecn/src/screens/Components.tsx b/ui_tailwind_shadecn/src/screens/Components.tsx
@@ -1,7 +1,6 @@
 
 import {
-  Bell,
-  CircleUser,
+
   Menu,
   Search,
 } from "lucide-react"
@@ -14,22 +13,15 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+
 import { Input } from "@/components/ui/input"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { Link } from "react-router-dom"
 import { Logo } from "@/components/custom_ui/Svg"
 import OutputsOfComponents from "@/components/custom_ui/OutputComponents"
 import { ComponentType } from "@/enums/iframEnums"
 import { useCategoriesStore, useComponentsStore } from "@/store/store"
-import {useLoginStore} from "@/store/Auth"
+// import {useLoginStore , useLoginUserInfo} from "@/store/Auth"
 import {ComponentsStore, } from '@/types/ComponentStore.type'
 import { useEffect } from "react"
 import { fetchCategories } from "@/api/components/categories"
@@ -39,6 +31,8 @@ import { CardSkeleton } from "@/components/custom_ui/skeleton/CardSkeleton"
 import { useParams } from 'react-router-dom';
 import {ComponentData} from '@/types/ComponentData.type';
 import { Switch } from "@/components/ui/switch"
+import { NavProfile } from "@/components/custom_ui/NavBar/NavProfile"
+// import { json } from "stream/consumers"
 
 export function Components() {
 
@@ -51,15 +45,17 @@ export function Components() {
   // this categries getting from a zustand store 
   const categries = useCategoriesStore((state) => state.categories);
   const components = useComponentsStore((state) => state[catogries as keyof ComponentsStore] ?? 'all');
-  const user = useLoginStore((state)=> state.user);
-  // useLoginStore.setState({isLogin: true});
+  // const user = useLoginStore((state)=> state.isLogin);
+  // const userInfo = useLoginUserInfo((state)=> state)
 
   useEffect(() => {
     fetchCategories();
     fetchComponentsStore(catogries ?? '');
   }, [catogries])
 
+
   return (
+
     <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[220px_1fr]">
       <div className="hidden   md:block">
        <div className="fixed h-full">
@@ -162,31 +158,11 @@ export function Components() {
               </div>
             </form>
           </div> 
-          <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
-              <Bell className="h-4 w-4" />
-              <span className="sr-only">Toggle notifications</span>
-            </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" size="icon" className="rounded-full">
-                <CircleUser className="h-5 w-5" />
-                <span className="sr-only">Toggle user menu</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>My Account</DropdownMenuLabel>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Settings</DropdownMenuItem>
-              <DropdownMenuItem>Support</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem>Logout</DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+         <NavProfile />
         </header>
         <main className="flex flex-1 flex-col gap-4 lg:gap-6 ">
           <div className="flex space justify-between items-center">
             <h1 className="text-lg font-semibold md:text-2xl">{catogries}  Components</h1>
-            <h1>{user ? user.name : "please login"}</h1>
           <div className="px-2"><Switch id="airplane-mode" defaultChecked/></div>
           </div>
 

diff --git a/ui_tailwind_shadecn/src/screens/Home.tsx b/ui_tailwind_shadecn/src/screens/Home.tsx
@@ -21,7 +21,7 @@ import { MovingWords } from '@/data/MovingText';
 import { Cateogries } from '@/data/ScroolingAnimations';
 import { HeroParallax } from "@/components/ui/hero-parallax";
 import { InfiniteMovingCards } from "@/components/ui/infinite-moving-cards";
-import MainNav from "@/components/custom_ui/MainNav";
+import MainNav from "@/components/custom_ui/NavBar/MainNav";
 
 export function Dashboard() {