Skip to content

Commit 72fdeed

Browse files
Abh1noobAbh1noob
authored
Merge pull request #13 from CodeChefVIT/sanjay/adminpanel
Search bar, Login related issues solved
2 parents 1433caa + 1a73901 commit 72fdeed

7 files changed

Lines changed: 173 additions & 213 deletions

File tree

‎src/app/layout.tsx‎

Lines changed: 24 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,12 @@
11
// app/layout.tsx
2+
import { NavigationWrapper } from "@/components/navigation-wrapper";
23
import { ThemeProvider } from "@/components/theme-provider";
34
import Providers from "@/lib/Providers";
45
import "@/styles/globals.css";
56
import { GeistSans } from "geist/font/sans";
67
import { type Metadata } from "next";
78
import { Toaster } from "react-hot-toast";
89

9-
import {
10-
Avatar,
11-
AvatarFallback,
12-
AvatarImage,
13-
} from "@/components/ui/avatar";
14-
import { Button } from "@/components/ui/button";
15-
import {
16-
DropdownMenu,
17-
DropdownMenuContent,
18-
DropdownMenuItem,
19-
DropdownMenuTrigger,
20-
} from "@/components/ui/dropdown-menu";
21-
import { ScrollArea } from "@/components/ui/scroll-area";
22-
import {
23-
Sheet,
24-
SheetContent,
25-
SheetTrigger,
26-
} from "@/components/ui/sheet";
27-
import {
28-
GroupIcon,
29-
HomeIcon,
30-
LogOutIcon,
31-
MenuIcon,
32-
Search,
33-
UsersIcon
34-
} from "lucide-react";
35-
import Link from "next/link";
36-
37-
3810
export const metadata: Metadata = {
3911
title: "CodeChef-VIT",
4012
description: "Made with ♡ by CodeChef-VIT",
@@ -56,111 +28,28 @@ export const metadata: Metadata = {
5628
],
5729
};
5830

59-
6031
export default function RootLayout({
61-
children,
62-
}: {
63-
children: React.ReactNode;
64-
}) {
65-
return (
66-
<html lang="en" className={`${GeistSans.variable}`}>
67-
<body >
68-
<Providers>
69-
<ThemeProvider
70-
attribute="class"
71-
defaultTheme="dark"
72-
enableSystem
73-
disableTransitionOnChange
74-
>
75-
<Toaster position="top-right" toastOptions={{ id: "_toast" }} />
76-
<div className="flex h-screen bg-black">
77-
<Sidebar />
78-
<div className="flex flex-col flex-1">
79-
<Navbar />
80-
<main className=" p-8 overflow-y-scroll">
81-
{children}
82-
</main>
83-
</div>
84-
</div>
85-
</ThemeProvider>
86-
</Providers>
87-
</body>
88-
</html>
89-
);
90-
}
91-
92-
93-
function Sidebar() {
94-
const navigation = [
95-
// { name: "Dashboard", href: "/dashboard", icon: HomeIcon },
96-
{ name: "Users", href: "/users", icon: UsersIcon },
97-
{ name: "Teams", href: "/teams", icon: GroupIcon },
98-
{name: "Search Team", href: "/team_search", icon: Search}
99-
];
100-
101-
return (
102-
<aside className="border-r border-gray-200 h-full w-64 dark:border-gray-700">
103-
<ScrollArea className="h-full">
104-
<div className="p-4">
105-
<Link href="/" className="text-2xl font-bold mb-6 block">
106-
Devsoc Admin
107-
</Link>
108-
</div>
109-
<nav className="px-2 py-4">
110-
{navigation.map((item) => (
111-
<Link
112-
key={item.name}
113-
href={item.href}
114-
className="flex items-center space-x-2 px-3 py-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 font-medium text-gray-700 dark:text-gray-300"
115-
>
116-
<item.icon className="h-4 w-4" />
117-
<span>{item.name}</span>
118-
</Link>
119-
))}
120-
</nav>
121-
</ScrollArea>
122-
</aside>
123-
);
124-
}
125-
function Navbar() {
126-
return (
127-
<nav className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 p-4">
128-
<div className="block md:hidden">
129-
<Sheet>
130-
<SheetTrigger asChild>
131-
<Button variant="ghost" size="icon">
132-
<MenuIcon className="h-5 w-5" />
133-
</Button>
134-
</SheetTrigger>
135-
<SheetContent side="left" className="p-0">
136-
<Sidebar />
137-
</SheetContent>
138-
</Sheet>
139-
</div>
140-
141-
<div className="text-xl font-semibold text-gray-700 dark:text-white">
142-
Admin Panel
143-
</div>
144-
<div className="flex items-center space-x-4">
145-
<DropdownMenu>
146-
<DropdownMenuTrigger asChild>
147-
<Button variant="ghost" className="relative">
148-
<Avatar>
149-
<AvatarImage src="https://github.com/shadcn.png" />
150-
<AvatarFallback>CN</AvatarFallback>
151-
</Avatar>
152-
</Button>
153-
</DropdownMenuTrigger>
154-
<DropdownMenuContent align="end">
155-
<DropdownMenuItem>
156-
<Link href="/api/auth/signout" className="flex items-center">
157-
<LogOutIcon className="mr-2 h-4 w-4" />
158-
Log out
159-
</Link>
160-
</DropdownMenuItem>
161-
</DropdownMenuContent>
162-
</DropdownMenu>
163-
</div>
164-
</nav>
165-
);
32+
children,
33+
}: {
34+
children: React.ReactNode;
35+
}) {
36+
return (
37+
<html lang="en" className={`${GeistSans.variable}`}>
38+
<body>
39+
<Providers>
40+
<ThemeProvider
41+
attribute="class"
42+
defaultTheme="dark"
43+
enableSystem
44+
disableTransitionOnChange
45+
>
46+
<Toaster position="top-right" toastOptions={{ id: "_toast" }} />
47+
<NavigationWrapper>
48+
{children}
49+
</NavigationWrapper>
50+
</ThemeProvider>
51+
</Providers>
52+
</body>
53+
</html>
54+
);
16655
}

‎src/app/page.tsx‎

Lines changed: 6 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
"use client"
22

3-
import Image from "next/image";
4-
import Link from "next/link";
5-
import logo from "../../public/cc-logo.svg";
63
import { useEffect } from "react";
74
import { useRouter } from "next/navigation";
5+
import { LoginForm } from "@/components/login-form";
86

97
export default function HomePage() {
108
const router = useRouter();
@@ -14,77 +12,11 @@ export default function HomePage() {
1412
})
1513
return (
1614
<>
17-
<main className=" flex min-h-screen flex-col items-center justify-center p-8">
18-
<div className="w-full max-w-xl rounded-lg bg-white p-8 text-center text-black shadow-lg">
19-
<Image
20-
src={logo as HTMLImageElement}
21-
alt="CodeChef-VIT Logo"
22-
width={150}
23-
height={150}
24-
className="mx-auto mb-4"
25-
/>
26-
<h1 className="mb-4 text-6xl font-bold">CodeChef-VIT</h1>
27-
<p className="mb-6 text-2xl">Portal Template Repository</p>
28-
<p className="mb-2 text-lg font-semibold text-gray-700">
29-
TanStack Query is Initialised in this Repository
30-
</p>
31-
<div className="flex flex-row gap-2">
32-
<Link
33-
href="/todo"
34-
className="mx-auto w-fit rounded-md bg-gray-100 p-3 text-lg font-medium text-indigo-600 transition-all duration-200 hover:bg-gray-200 hover:text-indigo-800 active:scale-95"
35-
>
36-
Sample GET Request
37-
</Link>
38-
<Link
39-
href="/post"
40-
className="mx-auto w-fit rounded-md bg-gray-100 p-3 text-lg font-medium text-indigo-600 transition-all duration-200 hover:bg-gray-200 hover:text-indigo-800 active:scale-95"
41-
>
42-
Sample POST Request
43-
</Link>
44-
</div>
45-
46-
<div className="mt-2">
47-
<p className="text-lg font-semibold text-gray-700">
48-
Shadcn is Initialised in this Repository
49-
</p>
50-
<p className="mt-4 text-gray-700">
51-
Custom toast hook is created. You can use it by importing{" "}
52-
<code className="rounded bg-gray-100 p-1">useToast</code> from{" "}
53-
<code className="rounded bg-gray-100 p-1">
54-
&quot;@/lib/toast.tsx&quot;
55-
</code>{" "}
56-
and then calling the create method with message and type as
57-
arguments.
58-
</p>
59-
<div className="mt-4 text-gray-700">
60-
<p>Example: </p>
61-
<div className="rounded-md bg-gray-100 p-2 text-left">
62-
<p>
63-
<span className="text-blue-600">const</span>{" "}
64-
<span className="text-green-600">toast</span> ={" "}
65-
<span className="text-blue-600">useToast</span>();
66-
</p>
67-
<p>
68-
<span className="text-green-600">toast</span>.
69-
<span className="text-blue-600">create</span>(
70-
<span className="text-red-600">&quot;Hello World&quot;</span>,{" "}
71-
<span className="text-red-600">&quot;success&quot;</span>);
72-
</p>
73-
</div>
74-
</div>
75-
<p className="mt-4 text-gray-700">
76-
There are 3 variants configured:{" "}
77-
<span className="font-bold">success</span>,{" "}
78-
<span className="font-bold">error</span>, and{" "}
79-
<span className="font-bold">info</span>.
80-
</p>
81-
<p className="mt-4 text-gray-700">
82-
You can add more in{" "}
83-
<code className="rounded bg-gray-100 p-1">toast.tsx</code> file
84-
</p>
85-
</div>
86-
</div>
87-
</main>
15+
<div className="h-screen flex items-center justify-center p-6 md:p-10 bg-black">
16+
<div className="w-full max-w-sm">
17+
<LoginForm />
18+
</div>
19+
</div>
8820
</>
8921
);
9022
}

‎src/app/teams/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@ export default function Teams() {
7575
<>
7676
<div className="p-4">
7777
<div className="mb-4"></div>
78-
<div className="mb-4 flex flex-col items-center">
78+
<div className="mb-4 flex flex-col items-start">
7979
<input
8080
className="bg-gray w-[50%] rounded-md border p-2 text-white"
81-
placeholder="Enter Name..."
81+
placeholder="Search"
8282
value={theName}
8383
onChange={(e) => setTheName(e.target.value)}
8484
type="text"

‎src/app/users/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,10 @@ export default function Users() {
6767
<div className="p-4">
6868
<div className="mb-4"></div>
6969
{/* <DataTableUsers users={oosers} columns={userCol} /> */}
70-
<div className="mb-4 flex flex-col items-center">
70+
<div className="mb-4 flex flex-col items-start">
7171
<input
7272
className="bg-gray w-[50%] rounded-md border p-2 text-white"
73-
placeholder="Enter Name..."
73+
placeholder="Search"
7474
value={theName}
7575
onChange={(e) => setTheName(e.target.value)}
7676
type="text"

‎src/components/navbar.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
"use client"
2+
3+
import Link from "next/link";
4+
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
5+
import { Button } from "@/components/ui/button";
6+
import {
7+
DropdownMenu,
8+
DropdownMenuContent,
9+
DropdownMenuItem,
10+
DropdownMenuTrigger,
11+
} from "@/components/ui/dropdown-menu";
12+
import {
13+
Sheet,
14+
SheetContent,
15+
SheetTrigger,
16+
} from "@/components/ui/sheet";
17+
import { LogOutIcon, MenuIcon } from "lucide-react";
18+
import { useRouter } from "next/navigation";
19+
import { Sidebar } from "./sidebar";
20+
21+
export function Navbar() {
22+
const router = useRouter();
23+
24+
const handleLogout = async ()=>{
25+
try{
26+
await fetch("/api/auth/signout", {
27+
method: "POST",
28+
headers: {
29+
'Content-Type': 'application/json'
30+
},
31+
})
32+
router.push("/login")
33+
}catch(err){
34+
console.log(err);
35+
}
36+
}
37+
return (
38+
<nav className="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 p-4">
39+
<div className="block md:hidden">
40+
<Sheet>
41+
<SheetTrigger asChild>
42+
<Button variant="ghost" size="icon">
43+
<MenuIcon className="h-5 w-5" />
44+
</Button>
45+
</SheetTrigger>
46+
<SheetContent side="left" className="p-0">
47+
<Sidebar />
48+
</SheetContent>
49+
</Sheet>
50+
</div>
51+
52+
<div className="text-xl font-semibold text-gray-700 dark:text-white">
53+
Admin Panel
54+
</div>
55+
<div className="flex items-center space-x-4">
56+
<DropdownMenu>
57+
<DropdownMenuTrigger asChild>
58+
<Button variant="ghost" className="relative">
59+
<Avatar>
60+
<AvatarImage src="https://github.com/shadcn.png" />
61+
<AvatarFallback>CN</AvatarFallback>
62+
</Avatar>
63+
</Button>
64+
</DropdownMenuTrigger>
65+
<DropdownMenuContent align="end">
66+
<DropdownMenuItem onClick = {()=> handleLogout()} className="flex items-center cursor-pointer">
67+
<LogOutIcon className="mr-2 h-4 w-4" />
68+
Log out
69+
</DropdownMenuItem>
70+
</DropdownMenuContent>
71+
</DropdownMenu>
72+
</div>
73+
</nav>
74+
);
75+
}

0 commit comments

Comments
 (0)