Skip to content

Commit 64fff64

Browse files
Sohan-RoutSohan-Rout
authored
Refactor : layout and daily dsa challenge has been added to stack push pop
Refactor : layout and daily dsa challenge has been added to stack push pop
2 parents e184ae9 + 5456226 commit 64fff64

13 files changed

Lines changed: 843 additions & 426 deletions

File tree

‎app/components/ui/PushPop.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@ const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, set
6161
};
6262

6363
return (
64-
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
64+
<div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
6565
<div className="flex flex-col sm:flex-row gap-2 mb-4">
6666
<input
6767
type="text"
6868
value={inputValue}
6969
onChange={(e) => setInputValue(e.target.value)}
7070
placeholder="Enter value"
71-
className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-blue-500"
71+
className="flex-1 p-2 border rounded dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500"
7272
disabled={isAnimating}
7373
/>
7474
<button
@@ -83,20 +83,20 @@ const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, set
8383
<button
8484
onClick={pop}
8585
disabled={isAnimating || stack.length === 0}
86-
className="bg-none border border-black dark:border-white text-balck dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:dark:border-blue-500 disabled:text-blue-500 disabled:border-blue-500 dark:disabled:text-blue-500"
86+
className="bg-green-500 text-black px-4 py-2 rounded disabled:opacity-50"
8787
>
8888
Pop
8989
</button>
9090
<button
9191
onClick={peek}
9292
disabled={isAnimating || stack.length === 0}
93-
className="bg-none border border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:dark:text-blue-500 disabled:text-blue-500 disabled:border-blue-500 dark:disabled:border-blue-500"
93+
className="bg-amber-500 text-black px-4 py-2 rounded disabled:opacity-50"
9494
>
9595
Peek
9696
</button>
9797
<button
9898
onClick={() => setStack([])}
99-
className="bg-none border border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 col-span-2 sm:col-span-1"
99+
className="bg-red-500 text-white px-4 py-2 rounded col-span-2 sm:col-span-1"
100100
disabled={isAnimating}
101101
>
102102
Reset

‎app/visualizer/sorting/bubblesort/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 paragraph = [
628
`Bubble Sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted. It gets its name because smaller elements "bubble" to the top of the list.`,
729
`Bubble Sort is an in-place sorting algorithm, meaning it requires only O(1) additional space (for temporary storage during swaps).`,
@@ -60,12 +82,19 @@ const content = () => {
6082
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
6183
<div className="col-span-1">
6284
<div className="hidden md:block">
63-
<iframe
64-
src="https://hw.glich.co/resources/embed/daily/dsa"
65-
width="100%"
66-
height="400"
67-
title="Daily DSA Challenge"
68-
></iframe>
85+
{mounted && (
86+
<iframe
87+
key={theme}
88+
src={
89+
theme === "dark"
90+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
91+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
92+
}
93+
width="100%"
94+
height="400"
95+
title="Daily DSA Challenge"
96+
></iframe>
97+
)}
6998
</div>
7099
<div className="flex justify-center">
71100
<span className="text-xs hidden md:block">
@@ -223,8 +252,37 @@ const content = () => {
223252
</div>
224253
</section>
225254
</article>
255+
256+
{/* Mobile iframe at bottom */}
257+
<div className="block md:hidden w-full">
258+
{mounted && (
259+
<iframe
260+
key={theme}
261+
src={
262+
theme === "dark"
263+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
264+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
265+
}
266+
width="100%"
267+
height="320"
268+
title="Daily DSA Challenge"
269+
></iframe>
270+
)}
271+
<div className="flex justify-center pb-8">
272+
<span className="text-xs">
273+
Powered by{" "}
274+
<a
275+
href="https://hw.glich.co/resources/daily"
276+
target="_blank"
277+
className="underline hover:text-blue-500 duration-300"
278+
>
279+
Hello World
280+
</a>
281+
</span>
282+
</div>
283+
</div>
226284
</main>
227285
);
228286
};
229287

230-
export default content;
288+
export default content;

‎app/visualizer/sorting/insertionsort/content.jsx‎

Lines changed: 64 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 paragraph = [
628
`Insertion Sort is a simple sorting algorithm that builds the final sorted array one item at a time. It works similarly to how you might sort playing cards in your hands - you take each new card and insert it into its proper position among the already sorted cards.`,
729
`The algorithm maintains a "sorted sublist" that grows with each iteration.`,
@@ -73,12 +95,19 @@ const content = () => {
7395
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
7496
<div className="col-span-1">
7597
<div className="hidden md:block">
76-
<iframe
77-
src="https://hw.glich.co/resources/embed/daily/dsa"
78-
width="100%"
79-
height="400"
80-
title="Daily DSA Challenge"
81-
></iframe>
98+
{mounted && (
99+
<iframe
100+
key={theme}
101+
src={
102+
theme === "dark"
103+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
104+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
105+
}
106+
width="100%"
107+
height="400"
108+
title="Daily DSA Challenge"
109+
></iframe>
110+
)}
82111
</div>
83112
<div className="flex justify-center">
84113
<span className="text-xs hidden md:block">
@@ -241,6 +270,35 @@ const content = () => {
241270
</div>
242271
</section>
243272
</article>
273+
274+
{/* Mobile iframe at bottom */}
275+
<div className="block md:hidden w-full">
276+
{mounted && (
277+
<iframe
278+
key={theme}
279+
src={
280+
theme === "dark"
281+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
282+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
283+
}
284+
width="100%"
285+
height="320"
286+
title="Daily DSA Challenge"
287+
></iframe>
288+
)}
289+
<div className="flex justify-center pb-8">
290+
<span className="text-xs">
291+
Powered by{" "}
292+
<a
293+
href="https://hw.glich.co/resources/daily"
294+
target="_blank"
295+
className="underline hover:text-blue-500 duration-300"
296+
>
297+
Hello World
298+
</a>
299+
</span>
300+
</div>
301+
</div>
244302
</main>
245303
);
246304
};

‎app/visualizer/sorting/mergesort/content.jsx‎

Lines changed: 64 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 paragraph = [
628
`Merge Sort is an efficient, stable, comparison-based sorting algorithm that follows the divide-and-conquer approach. It works by recursively dividing the unsorted list into sublists until each sublist contains a single element, then repeatedly merges these sublists to produce new sorted sublists until there is only one sorted list remaining.`,
729
`The log n factor comes from the division steps, while the n factor comes from the merge steps.`,
@@ -66,12 +88,19 @@ const content = () => {
6688
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
6789
<div className="col-span-1">
6890
<div className="hidden md:block">
69-
<iframe
70-
src="https://hw.glich.co/resources/embed/daily/dsa"
71-
width="100%"
72-
height="400"
73-
title="Daily DSA Challenge"
74-
></iframe>
91+
{mounted && (
92+
<iframe
93+
key={theme}
94+
src={
95+
theme === "dark"
96+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
97+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
98+
}
99+
width="100%"
100+
height="400"
101+
title="Daily DSA Challenge"
102+
></iframe>
103+
)}
75104
</div>
76105
<div className="flex justify-center">
77106
<span className="text-xs hidden md:block">
@@ -230,6 +259,35 @@ const content = () => {
230259
</div>
231260
</section>
232261
</article>
262+
263+
{/* Mobile iframe at bottom */}
264+
<div className="block md:hidden w-full">
265+
{mounted && (
266+
<iframe
267+
key={theme}
268+
src={
269+
theme === "dark"
270+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
271+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
272+
}
273+
width="100%"
274+
height="320"
275+
title="Daily DSA Challenge"
276+
></iframe>
277+
)}
278+
<div className="flex justify-center pb-8">
279+
<span className="text-xs">
280+
Powered by{" "}
281+
<a
282+
href="https://hw.glich.co/resources/daily"
283+
target="_blank"
284+
className="underline hover:text-blue-500 duration-300"
285+
>
286+
Hello World
287+
</a>
288+
</span>
289+
</div>
290+
</div>
233291
</main>
234292
);
235293
};

0 commit comments

Comments
 (0)