Skip to content

Commit dc15c44

Browse files
Ashrockzzz2003Ashrockzzz2003
committed
fix breaking dark mode toggle UI and redirect logic of logo button in header
1 parent 5bbab24 commit dc15c44

File tree

7 files changed

+97
-98
lines changed

7 files changed

+97
-98
lines changed

‎app/_components/VideoAcademy.js‎

Lines changed: 61 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@
22

33
import { useState } from "react";
44
import { usePathname } from "next/navigation";
5-
import { Video, X, Youtube, Play, WifiOff, AlertCircle, Loader2 } from "lucide-react";
5+
import {
6+
Video,
7+
X,
8+
Youtube,
9+
Play,
10+
WifiOff,
11+
AlertCircle,
12+
Loader2,
13+
} from "lucide-react";
614
import { videoLibrary } from "@/app/_data/videoLibrary";
715
import { useEffect } from "react";
816

@@ -42,7 +50,7 @@ const VideoAcademy = () => {
4250
await fetch("https://www.youtube.com/favicon.ico", {
4351
mode: "no-cors",
4452
signal: controller.signal,
45-
cache: 'no-store'
53+
cache: "no-store",
4654
});
4755

4856
clearTimeout(timeoutId);
@@ -66,7 +74,9 @@ const VideoAcademy = () => {
6674
};
6775

6876
const currentCategory = getCategory();
69-
const videoData = currentCategory ? videoLibrary[currentCategory] : videoLibrary.common;
77+
const videoData = currentCategory
78+
? videoLibrary[currentCategory]
79+
: videoLibrary.common;
7080

7181
return (
7282
<>
@@ -77,7 +87,10 @@ const VideoAcademy = () => {
7787
id="video-academy-button"
7888
>
7989
{isChecking ? (
80-
<Loader2 size={18} className="animate-spin text-yellow-400" />
90+
<Loader2
91+
size={18}
92+
className="animate-spin text-yellow-400"
93+
/>
8194
) : (
8295
<Video size={18} />
8396
)}
@@ -87,13 +100,13 @@ const VideoAcademy = () => {
87100
</button>
88101

89102
{isOpen && (
90-
<div
103+
<div
91104
className="fixed inset-0 bg-black/60 backdrop-blur-md z-[60] transition-opacity duration-300"
92105
onClick={() => setIsOpen(false)}
93106
/>
94107
)}
95108

96-
<div
109+
<div
97110
className={`fixed top-0 right-0 h-full w-full sm:w-[450px] bg-white z-[70] shadow-2xl transform transition-transform duration-500 ease-in-out flex flex-col ${isOpen ? "translate-x-0" : "translate-x-full"}`}
98111
>
99112
<div className="p-6 border-b flex items-center justify-between bg-black text-white">
@@ -102,10 +115,11 @@ const VideoAcademy = () => {
102115
<Video size={22} fill="currentColor" />
103116
</div>
104117
<h2 className="text-xl font-bold font-[family-name:var(--font-geist-mono)] tracking-tight text-white">
105-
<span className="text-yellow-400">EVOLVE</span> Academy
118+
<span className="text-yellow-400">EVOLVE</span>{" "}
119+
Academy
106120
</h2>
107121
</div>
108-
<button
122+
<button
109123
onClick={() => setIsOpen(false)}
110124
className="p-2 hover:bg-white/10 rounded-full transition-colors"
111125
>
@@ -114,27 +128,33 @@ const VideoAcademy = () => {
114128
</div>
115129

116130
<div className="flex-1 overflow-y-auto p-6 font-[family-name:var(--font-geist-sans)]">
117-
118131
<div className="mb-8">
119132
<h3 className="font-bold mb-4 flex items-center gap-2 text-gray-800 uppercase tracking-widest text-xs">
120133
<span className="w-1.5 h-1.5 bg-yellow-400 rounded-full"></span>
121134
Recommended Intro
122135
</h3>
123-
124136

125137
<div className="rounded-xl overflow-hidden shadow-xl border border-gray-200 bg-black">
126138
{!isOnline || connectionError ? (
127139
<div className="aspect-video w-full bg-gray-900 flex flex-col items-center justify-center p-6 text-center">
128-
<WifiOff size={48} className="text-gray-600 mb-4" />
129-
<h4 className="text-white font-bold mb-2">No Internet Access</h4>
140+
<WifiOff
141+
size={48}
142+
className="text-gray-600 mb-4"
143+
/>
144+
<h4 className="text-white font-bold mb-2">
145+
No Internet Access
146+
</h4>
130147
<p className="text-gray-400 text-xs">
131-
Video tutorials require an active internet connection to load from YouTube.
148+
Video tutorials require an active
149+
internet connection to load from
150+
YouTube.
132151
</p>
133-
<button
152+
<button
134153
onClick={verifyConnectivity}
135154
className="mt-4 text-yellow-400 text-xs font-bold hover:underline flex items-center gap-1"
136155
>
137-
<AlertCircle size={14} /> Retry connection
156+
<AlertCircle size={14} /> Retry
157+
connection
138158
</button>
139159
</div>
140160
) : (
@@ -150,31 +170,47 @@ const VideoAcademy = () => {
150170
</div>
151171
)}
152172
<div className="p-4 bg-white">
153-
<h4 className="font-bold text-gray-900 text-sm mb-1">{videoData.featured.title}</h4>
154-
<p className="text-xs text-gray-500 mb-2">{videoData.featured.channel}</p>
155-
<p className="text-xs text-gray-600 leading-relaxed">{videoData.featured.description}</p>
173+
<h4 className="font-bold text-gray-900 text-sm mb-1">
174+
{videoData.featured.title}
175+
</h4>
176+
<p className="text-xs text-gray-500 mb-2">
177+
{videoData.featured.channel}
178+
</p>
179+
<p className="text-xs text-gray-600 leading-relaxed">
180+
{videoData.featured.description}
181+
</p>
156182
</div>
157183
</div>
158184
</div>
159185

160186
<div className="mb-8">
161-
{(!isOnline || connectionError) ? (
187+
{!isOnline || connectionError ? (
162188
<div className="p-6 bg-red-50 rounded-xl border border-red-100 text-center">
163189
<div className="flex justify-center mb-3">
164-
<AlertCircle className="text-red-500" size={24} />
190+
<AlertCircle
191+
className="text-red-500"
192+
size={24}
193+
/>
165194
</div>
166-
<h4 className="font-bold text-gray-900 mb-2">Offline Mode</h4>
195+
<h4 className="font-bold text-gray-900 mb-2">
196+
Offline Mode
197+
</h4>
167198
<p className="text-sm text-gray-600">
168-
It seems you're offline or YouTube is unreachable. Please check your connection to explore more tutorials.
199+
It seems you're offline or YouTube is
200+
unreachable. Please check your connection to
201+
explore more tutorials.
169202
</p>
170203
</div>
171204
) : (
172205
<div className="p-6 bg-gray-50 rounded-xl border border-gray-200 text-center">
173-
<h4 className="font-bold text-gray-900 mb-2">Want to learn more?</h4>
206+
<h4 className="font-bold text-gray-900 mb-2">
207+
Want to learn more?
208+
</h4>
174209
<p className="text-sm text-gray-600 mb-4">
175-
Explore more tutorials and advanced concepts on YouTube.
210+
Explore more tutorials and advanced concepts
211+
on YouTube.
176212
</p>
177-
<a
213+
<a
178214
href={`https://www.youtube.com/results?search_query=${encodeURIComponent(videoData.searchQuery)}`}
179215
target="_blank"
180216
rel="noopener noreferrer"
@@ -186,7 +222,6 @@ const VideoAcademy = () => {
186222
</div>
187223
)}
188224
</div>
189-
190225
</div>
191226
</div>
192227
</>

‎app/_data/videoLibrary.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,51 @@ export const videoLibrary = {
44
title: "Evolutionary Algorithms",
55
id: "L--IxUH4fac",
66
channel: "Dr. Shahin Rostami",
7-
description: "A foundational look at how simulated evolution solves complex optimization problems.",
7+
description:
8+
"A foundational look at how simulated evolution solves complex optimization problems.",
89
},
9-
searchQuery: "evolutionary algorithms evolutionary computation explained"
10+
searchQuery:
11+
"evolutionary algorithms evolutionary computation explained",
1012
},
1113
ea: {
1214
featured: {
1315
title: "Genetic Algorithm Steps",
1416
id: "uQj5UNhCPuo",
1517
channel: "Kie Codes",
16-
description: "A step-by-step breakdown of population, selection, and reproduction.",
18+
description:
19+
"A step-by-step breakdown of population, selection, and reproduction.",
1720
},
18-
searchQuery: "evolutionary algorithms tutorial python"
21+
searchQuery: "evolutionary algorithms tutorial python",
1922
},
2023
gp: {
2124
featured: {
2225
title: "Intro to Genetic Programming",
2326
id: "tTMpKrKkYXo",
24-
channel: "John Koza",
25-
description: "The pioneer of GP explains how to evolve computer programs.",
27+
channel: "John Koza",
28+
description:
29+
"The pioneer of GP explains how to evolve computer programs.",
2630
},
27-
searchQuery: "genetic programming tutorial explanation"
31+
searchQuery: "genetic programming tutorial explanation",
2832
},
2933
pso: {
3034
featured: {
3135
title: "Particle Swarm Optimization",
3236
id: "vhSBqk6SAB4",
3337
channel: "Premature Abstraction",
34-
description: "An intuitive guide to the velocity and position update rules of swarms.",
38+
description:
39+
"An intuitive guide to the velocity and position update rules of swarms.",
3540
},
36-
searchQuery: "particle swarm optimization explained visualization"
41+
searchQuery: "particle swarm optimization explained visualization",
3742
},
3843
ml: {
3944
featured: {
4045
title: "Evolutionary Algorithms for Machine Learning",
4146
id: "nXjVZ-fYXys",
4247
channel: "Data Science in your pocket",
43-
description: "Learn how EA can fine-tune datasets and models for better performance.",
48+
description:
49+
"Learn how EA can fine-tune datasets and models for better performance.",
4450
},
45-
searchQuery: "evolutionary algorithms for machine learning feature selection hyperparameter tuning"
46-
}
51+
searchQuery:
52+
"evolutionary algorithms for machine learning feature selection hyperparameter tuning",
53+
},
4754
};

‎app/components/ClientLayout.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
"use client";
22

3-
import { ThemeProvider } from "../contexts/ThemeContext";
43
import Header from "./Header";
54

65
export default function ClientLayout({ children }) {
76
return (
8-
<ThemeProvider>
7+
<>
98
<Header />
109
{children}
11-
</ThemeProvider>
10+
</>
1211
);
1312
}

‎app/components/Header.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
"use client";
22

3-
import ThemeToggle from "./ThemeToggle";
43
import Link from "next/link";
54
import Image from "next/image";
65
import { usePathname } from "next/navigation";
6+
import { useEffect, useState } from "react";
77

88
export default function Header() {
99
const pathname = usePathname();
1010
const isHome = pathname === "/";
1111

12+
const [isLoggedIn, setIsLoggedIn] = useState(false);
13+
useEffect(() => {
14+
if (localStorage.getItem("id")) {
15+
setIsLoggedIn(true);
16+
}
17+
}, []);
18+
1219
return (
1320
<header className="fixed top-0 left-0 right-0 z-[100] flex justify-between items-center px-6 py-4 pointer-events-none">
1421
<div
1522
className={`transition-all duration-300 pointer-events-auto ${isHome ? "opacity-0 -translate-x-4" : "opacity-100 translate-x-0"}`}
1623
>
17-
<Link href="/" className="flex items-center gap-2 group">
24+
<Link
25+
href={isLoggedIn ? "/create" : "/"}
26+
className="flex items-center gap-2 group"
27+
>
1828
<div className="bg-foreground text-background p-1.5 rounded-lg rotate-[-4deg] group-hover:rotate-0 transition-transform duration-200">
1929
<Image
2030
src="/EvOCicon.png"
@@ -29,10 +39,6 @@ export default function Header() {
2939
</span>
3040
</Link>
3141
</div>
32-
33-
<div className="pointer-events-auto">
34-
<ThemeToggle />
35-
</div>
3642
</header>
3743
);
3844
}

‎app/components/ThemeToggle.js‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎app/layout.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,9 @@ export default function RootLayout({ children }) {
5656
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
5757
>
5858
<VideoAcademy />
59-
<ClientLayout>
60-
{children}
61-
<HelpDocsButton />
62-
</ClientLayout>
59+
{children}
60+
<HelpDocsButton />
61+
<ClientLayout />
6362
</body>
6463
</html>
6564
);

‎app/page.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { BookUp2, Pickaxe } from "lucide-react";
22
import Image from "next/image";
33
import Link from "next/link";
4-
import ThemeToggle from "./components/ThemeToggle";
54

65
export default function Home() {
76
return (

0 commit comments

Comments
 (0)