Skip to content

Commit bd961c5

Browse files
git-create-devbengit-create-devben
committed
added auth and current user verification
1 parent 3303237 commit bd961c5

File tree

14 files changed

+557
-25
lines changed

14 files changed

+557
-25
lines changed

‎app/frontend/page.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { auth, currentUser } from "@clerk/nextjs";
2+
3+
const frontend = () => {
4+
const { userId } = auth();
5+
const user = currentUser();
6+
return <>{!user && <h1 className="text-red-400">Hello front-end no authorize</h1>}
7+
<main>
8+
<h1 className="text-blue-400">Hello frontend</h1>
9+
</main>
10+
</>;
11+
};
12+
13+
export default frontend;

‎app/hero.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,47 @@
11
import React from "react";
2+
import { Role } from "./project/role";
3+
import { Skill } from "./project/skill";
4+
import { Question } from "./project/Question";
25

36
const Hero = () => {
47
return (
58
<React.Fragment>
69
<main className="mt-8">
710
<header className="space-y-6 lg:mt-14">
8-
<h1 className="text-[#89cc55] lg:text-5xl text-4xl text-center text-pretty">Developer project Ideal</h1>
11+
<h1 className="text-[#89cc55] lg:text-5xl text-4xl text-center text-pretty">
12+
Developer project Ideal
13+
</h1>
914
<p className="text-md text-[#cccccc] max-w-[40rem] w-full text-center leading-6 m-auto">
1015
DevIdealHub: A community-driven platform curating project Ideas and
1116
guides to assist developers in navigating and enhancing their
1217
learning paths.
1318
</p>
1419
</header>
20+
{/* Role base */}
21+
<div className="divider mt-14 p-2 ">
22+
<span className="border-[2px] border-[#cccccc3b] rounded-md lg:text-lg text-sm px-4 py-1 bg-transparent hover:border-[#cccc]">
23+
Role based project roadmap
24+
</span>
25+
</div>
1526
<section>
16-
27+
<Role />
28+
</section>
29+
<div className="divider mt-14 p-2 ">
30+
<span className="border-[2px] border-[#cccccc3b] rounded-md lg:text-lg text-sm lg:px-4 py-1 bg-transparent hover:border-[#cccc]">
31+
Skills based project roadmap
32+
</span>
33+
</div>
34+
{/* Skills base */}
35+
<section>
36+
<Skill/>
37+
</section>
38+
<div className="divider mt-14 p-2 ">
39+
<span className="border-[2px] border-[#cccccc3b] rounded-md lg:text-lg text-sm px-4 py-1 bg-transparent hover:border-[#cccc]">
40+
Questions
41+
</span>
42+
</div>
43+
<section>
44+
<Question/>
1745
</section>
1846
</main>
1947
</React.Fragment>

‎app/layout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import { Poppins } from "next/font/google";
33
import "../styles/globals.css";
44
import Navbar from "@/components/navbar";
55
import { ClerkProvider } from "@clerk/nextjs";
6-
import { Toaster } from "@/components/ui/sonner"
7-
8-
6+
import { Toaster } from "sonner";
97

108

119
const poppins = Poppins({
@@ -26,7 +24,8 @@ export default function RootLayout({
2624
return (
2725
<ClerkProvider>
2826
<html lang="en">
29-
<body className={`${poppins.className} container`}>
27+
<body className={`${poppins.className} wind`}>
28+
3029
<Navbar/>
3130
{children}
3231
<Toaster />

‎app/project/Question.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export const Question = () => {
2+
return(
3+
<>
4+
<main className="">
5+
{/* parent div */}
6+
<div className="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 xl:px-[30rem] py-16 px-14 ">
7+
<div className="role-design">JavaScript</div>
8+
<div className="role-design">More Coming soon</div>
9+
</div>
10+
</main>
11+
</>
12+
)
13+
}

‎app/project/role.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import Link from "next/link";
2+
import { auth, currentUser } from "@clerk/nextjs";
3+
export async function Role() {
4+
const { userId } = auth();
5+
const user = await currentUser();
6+
7+
const role = [
8+
{ name: "Frontend", href: "/frontend", a: "/signIn" },
9+
{ name: "Backend", href: "/frontend" },
10+
{ name: "DevOps", href: "/frontend" },
11+
{ name: "Android", href: "/frontend" },
12+
{ name: "FullStack", href: "/frontend" },
13+
{ name: "Technical Writer", href: "/frontend" },
14+
{ name: "UI Design", href: "/frontend" },
15+
{ name: "Quality Assurance", href: "/frontend" },
16+
{ name: "Cyber Security", href: "/frontend" },
17+
{ name: "UX Design", href: "/frontend" },
18+
];
19+
return (
20+
<>
21+
<main className="">
22+
{/* parent div */}
23+
24+
<div className="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 xl:px-[30rem] py-16 px-14 ">
25+
{role.map((item) => (
26+
<div className="role-design" key={item.name}>
27+
{user ? (
28+
<Link href={item.href}>{item.name}</Link>
29+
) : (
30+
<Link href={item.a || item.href}>{item.name}</Link>
31+
)}
32+
</div>
33+
))}
34+
<div className="role-design">Create Roadmap</div>
35+
</div>
36+
</main>
37+
</>
38+
);
39+
}

‎app/project/skill.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export function Skill() {
2+
return(
3+
<>
4+
<main className="">
5+
{/* parent div */}
6+
<div className="grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 xl:px-[30rem] py-16 px-14 ">
7+
<div className="role-design">JavaScript</div>
8+
<div className="role-design">Python</div>
9+
<div className="role-design">React</div>
10+
<div className="role-design">React Native</div>
11+
<div className="role-design">Flutter</div>
12+
<div className="role-design">Electron</div>
13+
<div className="role-design">NodeJs</div>
14+
<div className="role-design">C#</div>
15+
<div className="role-design">Typescript</div>
16+
<div className="role-design">Create Roadmap</div>
17+
</div>
18+
</main>
19+
</>
20+
)
21+
}

‎components/logo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export function Logo() {
66
<div className="text-[#ffff] text-4xl font-extrabold">
77
<Link href={"/"}>
88
<span className="underline">
9-
D <b className="text-4xl font-extrabold">.</b>
9+
D.
1010
</span>
1111
</Link>
1212
</div>

‎components/navbar.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
"use";
21
import React from "react";
32

43
import { Logo } from "./logo";
54
import Link from "next/link";
65
import { Button } from "./ui/button";
76
import Submit from "./submitIdeal";
8-
import { UserButton } from "./profile";
7+
import Settings from "./profiler";
98
import { currentUser } from "@clerk/nextjs";
109
export default async function navbar() {
1110
const menu = [
@@ -16,10 +15,11 @@ export default async function navbar() {
1615

1716
const user = await currentUser();
1817

18+
1919
return (
2020
<React.Fragment>
2121
<nav className="py-10 md:flex md:justify-center items-center">
22-
<div className="flex h-7 gap-10 items-center justify-between">
22+
<div className="flex h-7 gap-12 items-center justify-around">
2323
<Logo />
2424

2525
<ul className="gap-4 hidden md:flex lg:flex">
@@ -31,7 +31,7 @@ export default async function navbar() {
3131
<Submit />
3232
</ul>
3333

34-
{!user &&(
34+
{!user && (
3535
<div className="gap-4 flex">
3636
<Button className="bg-white hover:bg-slate-100">
3737
<Link href="/signIn" className="text-black">
@@ -45,11 +45,9 @@ export default async function navbar() {
4545
</Link>
4646
</Button>
4747
</div>
48-
)
49-
}
48+
)}
5049
<div className="gap-4 flex">
51-
<UserButton />
52-
{/* <SignOut /> */}
50+
<Settings />
5351
</div>
5452
</div>
5553
</nav>
@@ -66,8 +64,8 @@ export const MobileNav = () => {
6664
];
6765
return (
6866
<>
69-
<main className="absolute bottom-6 right-0 left-0 lg:hidden md:hidden ">
70-
<nav className="bg-white rounded-lg py-4 w-full max-w-96 m-auto animate-bounce">
67+
<main className="fixed bottom-5 left-1/2 z-30 w-full lg:hidden md:hidden -translate-x-1/2 transform animate-fade-slide-up transition-all duration-300">
68+
<nav className="bg-white rounded-lg py-4 w-full max-w-96 m-auto animate-bounce p-2">
7169
<ul className="flex gap-6 justify-center">
7270
{menu.map((item) => (
7371
<li key={item.name} className="text-black hover:underline ">

‎components/profiler.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
"use client";
2+
3+
import { useUser, useClerk } from "@clerk/nextjs";
4+
import { useRouter } from "next/navigation";
5+
import Image from "next/image";
6+
import Link from "next/link";
7+
8+
import { Button } from "@/components/ui/button";
9+
import {
10+
Dialog,
11+
DialogContent,
12+
DialogDescription,
13+
DialogFooter,
14+
DialogHeader,
15+
DialogTitle,
16+
DialogTrigger,
17+
} from "@/components/ui/dialog";
18+
19+
const Settings = () => {
20+
const { isLoaded, user } = useUser();
21+
const { signOut, openUserProfile } = useClerk();
22+
const router = useRouter();
23+
24+
// Make sure that the useUser() hook has loaded
25+
if (!isLoaded) return null;
26+
// Make sure there is valid user data
27+
if (!user?.id) return null;
28+
return (
29+
<Dialog>
30+
<DialogTrigger asChild className="flex">
31+
<Button variant="outline">
32+
<Image
33+
alt={user?.primaryEmailAddress?.emailAddress!}
34+
src={user?.imageUrl}
35+
width={50}
36+
height={50}
37+
className="mr-1 rounded-full border border-gray-200 drop-shadow-sm"
38+
/>
39+
<span>
40+
{user?.username
41+
? user.username
42+
: user?.primaryEmailAddress?.emailAddress!}
43+
</span>
44+
</Button>
45+
</DialogTrigger>
46+
<DialogContent className="sm:max-w-[425px]">
47+
<DialogHeader>
48+
<DialogTitle>Settings</DialogTitle>
49+
</DialogHeader>
50+
51+
<Button onClick={() => openUserProfile()}>Profile</Button>
52+
53+
<Button onClick={() => signOut(() => router.push("/"))}>LogOut</Button>
54+
</DialogContent>
55+
</Dialog>
56+
);
57+
};
58+
59+
export default Settings;

0 commit comments

Comments
 (0)