Skip to content

Commit 74df079

Browse files
CoreTech7704CoreTech7704
committed
Update: edit and blog creation page with dashboard
1 parent ddb67e2 commit 74df079

9 files changed

Lines changed: 921 additions & 57 deletions

File tree

‎package-lock.json‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import CategoriesPage from "./pages/Categories";
1313
import BlogView from "./pages/BlogView";
1414
import Profile from "./pages/Profile";
1515
import ProfileEdit from "./pages/ProfileEdit";
16+
import Dashboard from "./pages/Dashboard"
17+
import CreateBlog from "./pages/CreateBlog";
18+
import EditBlog from "./pages/EditBlog"
1619

1720
function App() {
1821
return (
@@ -38,16 +41,18 @@ function App() {
3841
{/* User */}
3942
<Route path="/profile" element={<Profile />} />
4043
<Route path="/editprofile" element={<ProfileEdit />}/>
44+
<Route path="/dashboard" element={<Dashboard />} />
45+
<Route path="/dashboard/blogs/new" element={<CreateBlog />} />
46+
<Route path="/dashboard/blogs/:id/edit" element={<EditBlog />} />
4147
<Route path="/profile/change-password" element={<ChangePassword />} />
4248

4349
{/* Content */}
4450
<Route path="/blogs" element={<Blogs />} />
4551
<Route path="/categories" element={<CategoriesPage />} />
52+
<Route path="/blogs/:slug" element={<BlogView />} />
4653

4754
{/* Fallback */}
4855
<Route path="*" element={<NotFound />} />
49-
50-
<Route path="/blogs/:slug" element={<BlogView />} />
5156
</Routes>
5257

5358
<Footer />

‎src/components/Hero.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import FloatingLines from "@/components/ui/FloatingLines";
22
import { ArrowRight } from 'lucide-react';
3+
import { Link } from "react-router-dom";
34

45
export default function Hero() {
56
return (
@@ -30,8 +31,8 @@ export default function Hero() {
3031
</p>
3132

3233
<div className="flex gap-4">
33-
<a
34-
href="#Explore-Blogs"
34+
<Link
35+
to="/blogs"
3536
className=" relative flex items-center gap-2
3637
rounded-xl px-6 py-3 text-md font-semibold text-white
3738
bg-gradient-to-r from-cyan-500 to-violet-600
@@ -45,9 +46,9 @@ export default function Hero() {
4546
>
4647
Explore Blogs
4748
<ArrowRight className="transition-transform duration-300 group-hover:translate-x-1" />
48-
</a>
49-
<a
50-
href="#get-started"
49+
</Link>
50+
<Link
51+
to="/auth"
5152
className="relative inline-flex items-center justify-center
5253
px-6 py-2 rounded-xl
5354
text-md font-semibold text-white/80
@@ -60,7 +61,7 @@ export default function Hero() {
6061
"
6162
>
6263
Join Voidwork
63-
</a>
64+
</Link>
6465
</div>
6566
</div>
6667

‎src/components/Navbar.jsx‎

Lines changed: 104 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
import { Link } from "react-router-dom";
22
import ThemeToggle from "./ThemeToggle";
3+
import { ChevronDown } from "lucide-react";
4+
import { useState, useRef, useEffect } from "react";
35

46
export default function Navbar({ theme, setTheme }) {
7+
const [userOpen, setUserOpen] = useState(false);
8+
const userRef = useRef(null);
9+
10+
useEffect(() => {
11+
function handleClickOutside(e) {
12+
if (userRef.current && !userRef.current.contains(e.target)) {
13+
setUserOpen(false);
14+
}
15+
}
16+
document.addEventListener("mousedown", handleClickOutside);
17+
return () => document.removeEventListener("mousedown", handleClickOutside);
18+
}, []);
519

620
return (
721
<header className="fixed top-0 z-50 w-full px-6">
@@ -34,25 +48,9 @@ export default function Navbar({ theme, setTheme }) {
3448
{/* Center: Navigation */}
3549
<div className="hidden md:flex gap-6 text-lg font-medium">
3650
<Link
37-
key="home"
38-
to="/"
39-
className="
40-
text-slate-600 dark:text-slate-300
41-
hover:text-cyan-500 dark:hover:text-cyan-400
42-
relative
43-
after:absolute after:bottom-[-6px] after:left-0
44-
after:w-0 after:h-[2px]
45-
after:bg-cyan-500 dark:after:bg-cyan-400
46-
after:transition-all after:duration-300
47-
hover:after:w-full
48-
"
49-
>
50-
Home
51-
</Link>
52-
<Link
53-
key="Blogs"
54-
to="/blogs"
55-
className="
51+
key="home"
52+
to="/"
53+
className="
5654
text-slate-600 dark:text-slate-300
5755
hover:text-cyan-500 dark:hover:text-cyan-400
5856
relative
@@ -62,13 +60,13 @@ export default function Navbar({ theme, setTheme }) {
6260
after:transition-all after:duration-300
6361
hover:after:w-full
6462
"
65-
>
66-
Blogs
63+
>
64+
Home
6765
</Link>
6866
<Link
69-
key="User"
70-
to="/user"
71-
className="
67+
key="Blogs"
68+
to="/blogs"
69+
className="
7270
text-slate-600 dark:text-slate-300
7371
hover:text-cyan-500 dark:hover:text-cyan-400
7472
relative
@@ -78,13 +76,67 @@ export default function Navbar({ theme, setTheme }) {
7876
after:transition-all after:duration-300
7977
hover:after:w-full
8078
"
81-
>
82-
User
79+
>
80+
Blogs
8381
</Link>
82+
83+
{/* User Dropdown */}
84+
<div className="relative" ref={userRef}>
85+
<button
86+
onClick={() => setUserOpen(!userOpen)}
87+
className="
88+
flex items-center gap-1
89+
text-slate-600 dark:text-slate-300
90+
hover:text-cyan-500 dark:hover:text-cyan-400
91+
relative
92+
after:absolute after:bottom-[-6px] after:left-0
93+
after:w-0 after:h-[2px]
94+
after:bg-cyan-500 dark:after:bg-cyan-400
95+
after:transition-all after:duration-300
96+
hover:after:w-full
97+
"
98+
>
99+
User_name
100+
<ChevronDown
101+
size={14}
102+
className={`transition-transform duration-200 ${
103+
userOpen ? "rotate-180" : ""
104+
}`}
105+
/>
106+
</button>
107+
108+
<div
109+
className={`
110+
absolute right-0 mt-4 w-48
111+
rounded-xl
112+
113+
bg-white/60 dark:bg-slate-900/60
114+
backdrop-blur-2xl
115+
116+
border border-slate-200/40 dark:border-slate-800/40
117+
shadow-lg
118+
overflow-hidden
119+
z-50
120+
121+
transition-all duration-200 ease-out
122+
transform
123+
${
124+
userOpen
125+
? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
126+
: "opacity-0 scale-95 -translate-y-2 pointer-events-none"
127+
}
128+
`}
129+
>
130+
<DropdownItem to="/profile" label="Profile" />
131+
<DropdownItem to="/dashboard" label="Dashboard" />
132+
<DropdownItem to="/dashboard/blogs/new" label="Create Blog" />
133+
</div>
134+
</div>
135+
84136
<Link
85-
key="Contact"
86-
to="/contact"
87-
className="
137+
key="Contact"
138+
to="/contact"
139+
className="
88140
text-slate-600 dark:text-slate-300
89141
hover:text-cyan-500 dark:hover:text-cyan-400
90142
relative
@@ -94,13 +146,13 @@ export default function Navbar({ theme, setTheme }) {
94146
after:transition-all after:duration-300
95147
hover:after:w-full
96148
"
97-
>
98-
Contact Us
149+
>
150+
Contact Us
99151
</Link>
100152
<Link
101-
key="about"
102-
to="/about"
103-
className="
153+
key="about"
154+
to="/about"
155+
className="
104156
text-slate-600 dark:text-slate-300
105157
hover:text-cyan-500 dark:hover:text-cyan-400
106158
relative
@@ -110,8 +162,8 @@ export default function Navbar({ theme, setTheme }) {
110162
after:transition-all after:duration-300
111163
hover:after:w-full
112164
"
113-
>
114-
About Us
165+
>
166+
About Us
115167
</Link>
116168
</div>
117169

@@ -137,4 +189,20 @@ export default function Navbar({ theme, setTheme }) {
137189
</nav>
138190
</header>
139191
);
192+
193+
function DropdownItem({ to, label }) {
194+
return (
195+
<Link
196+
to={to}
197+
className="
198+
block px-4 py-2
199+
text-slate-700 dark:text-slate-300
200+
hover:bg-slate-100 dark:hover:bg-slate-800
201+
transition-colors
202+
"
203+
>
204+
{label}
205+
</Link>
206+
);
207+
}
140208
}

0 commit comments

Comments
 (0)