Skip to content

Commit 8d416f4

Browse files
Sohan-RoutSohan-Rout
committed
fix : added dsa challenge on phone and dark mode
1 parent aaa38d3 commit 8d416f4

File tree

6 files changed

+104
-16
lines changed

6 files changed

+104
-16
lines changed

‎app/components/navbar.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -244,12 +244,12 @@ const handleLogout = async () => {
244244
return () => window.removeEventListener("scroll", handleScroll);
245245
}, []);
246246

247-
// Toggle theme and save to localStorage
248247
const toggleTheme = () => {
249248
const newTheme = theme === "light" ? "dark" : "light";
250249
setTheme(newTheme);
251250
localStorage.setItem("theme", newTheme);
252251
document.documentElement.classList.toggle("dark", newTheme === "dark");
252+
window.dispatchEvent(new Event("themeChange"));
253253
};
254254

255255
// Close mobile menu

‎app/components/navbarinner.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function Navbar() {
2222
setTheme(newTheme);
2323
localStorage.setItem('theme', newTheme);
2424
document.documentElement.classList.toggle('dark', newTheme === 'dark');
25+
window.dispatchEvent(new Event('themeChange'));
2526
};
2627

2728
const handleLogout = async () => {

‎app/visualizer/searching/binarysearch/content.jsx‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,29 @@
11
"use client";
22
import ComplexityGraph from "@/app/components/ui/graph";
3+
import { useEffect, useState } from "react";
34

45
const content = () => {
6+
const [theme, setTheme] = useState('light');
7+
const [mounted, setMounted] = useState(false);
8+
9+
useEffect(() => {
10+
const updateTheme = () => {
11+
const savedTheme = localStorage.getItem('theme') || 'light';
12+
setTheme(savedTheme);
13+
};
14+
15+
updateTheme();
16+
setMounted(true);
17+
18+
window.addEventListener('storage', updateTheme);
19+
window.addEventListener('themeChange', updateTheme);
20+
21+
return () => {
22+
window.removeEventListener('storage', updateTheme);
23+
window.removeEventListener('themeChange', updateTheme);
24+
};
25+
}, []);
26+
527
const paragraphs = [
628
`Binary Search is an efficient algorithm for finding an item in a sorted list. It works by repeatedly dividing the search interval in half. If the target value is less than the middle element, the search continues in the lower half. Otherwise, it continues in the upper half. This process repeats until the value is found.`,
729
`If the number is not in the list (e.g., searching for 8), the search ends when the subarray becomes empty.`,
@@ -42,12 +64,19 @@ const content = () => {
4264
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
4365
<div className="col-span-1">
4466
<div className="hidden md:block">
45-
<iframe
46-
src="https://hw.glich.co/resources/embed/daily/dsa"
47-
width="100%"
48-
height="400"
49-
title="Daily DSA Challenge"
50-
></iframe>
67+
{mounted && (
68+
<iframe
69+
key={theme}
70+
src={
71+
theme === "dark"
72+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
73+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
74+
}
75+
width="100%"
76+
height="400"
77+
title="Daily DSA Challenge"
78+
></iframe>
79+
)}
5180
</div>
5281
<div className="flex justify-center">
5382
<span className="text-xs hidden md:block">

‎app/visualizer/searching/linearsearch/animation.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ const LinearSearch = () => {
151151
className="block text-gray-700 dark:text-gray-300 mb-2"
152152
htmlFor="arrayElements"
153153
>
154-
Array Elements (comma-separated)
154+
Array Elements
155155
</label>
156156
<div className="flex gap-2">
157157
<input

‎app/visualizer/searching/linearsearch/content.jsx‎

Lines changed: 65 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,29 @@
11
"use client";
22
import ComplexityGraph from "@/app/components/ui/graph";
3+
import { useEffect, useState } from "react";
34

45
const content = () => {
6+
const [theme, setTheme] = useState('light');
7+
const [mounted, setMounted] = useState(false);
8+
9+
useEffect(() => {
10+
const updateTheme = () => {
11+
const savedTheme = localStorage.getItem('theme') || 'light';
12+
setTheme(savedTheme);
13+
};
14+
15+
updateTheme();
16+
setMounted(true);
17+
18+
window.addEventListener('storage', updateTheme);
19+
window.addEventListener('themeChange', updateTheme);
20+
21+
return () => {
22+
window.removeEventListener('storage', updateTheme);
23+
window.removeEventListener('themeChange', updateTheme);
24+
};
25+
}, []);
26+
527
const paragraphs = [
628
`Linear Search is a simple method to find a particular value in a list. It checks each element one by one from the start until it finds the target value. If the value is found, it returns its position; otherwise, it says the value is not present.`,
729
`Imagine you have a list of numbers: [5, 3, 8, 1, 9] and you want to find the number 8.`,
@@ -42,12 +64,19 @@ const content = () => {
4264
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
4365
<div className="col-span-1">
4466
<div className="hidden md:block">
45-
<iframe
46-
src="https://hw.glich.co/resources/embed/daily/dsa"
47-
width="100%"
48-
height="400"
49-
title="Daily DSA Challenge"
50-
></iframe>
67+
{mounted && (
68+
<iframe
69+
key={theme}
70+
src={
71+
theme === "dark"
72+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
73+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
74+
}
75+
width="100%"
76+
height="400"
77+
title="Daily DSA Challenge"
78+
></iframe>
79+
)}
5180
</div>
5281
<div className="flex justify-center">
5382
<span className="text-xs hidden md:block">
@@ -174,8 +203,37 @@ const content = () => {
174203
</div>
175204
</section>
176205
</article>
206+
207+
{/* Mobile iframe at bottom */}
208+
<div className="block md:hidden w-full">
209+
{mounted && (
210+
<iframe
211+
key={theme}
212+
src={
213+
theme === "dark"
214+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
215+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
216+
}
217+
width="100%"
218+
height="300"
219+
title="Daily DSA Challenge"
220+
></iframe>
221+
)}
222+
<div className="flex justify-center pb-8">
223+
<span className="text-xs">
224+
Powered by{" "}
225+
<a
226+
href="https://hw.glich.co/resources/daily"
227+
target="_blank"
228+
className="underline hover:text-blue-500 duration-300"
229+
>
230+
Hello World
231+
</a>
232+
</span>
233+
</div>
234+
</div>
177235
</main>
178236
);
179237
};
180238

181-
export default content;
239+
export default content;

‎app/visualizer/searching/linearsearch/page.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function Page() {
8686
<Content />
8787
</section>
8888

89-
<section className="px-6">
89+
<section>
9090
<LinearSearchAnimation />
9191
</section>
9292

0 commit comments

Comments
 (0)