Refactor : layout and daily dsa challenge has been added to stack push pop

app/components/ui/PushPop.jsx

@@ -61,14 +61,14 @@ const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, set
   };
 
   return (
-    <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
+    <div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
       <div className="flex flex-col sm:flex-row gap-2 mb-4">
         <input
           type="text"
           value={inputValue}
           onChange={(e) => setInputValue(e.target.value)}
           placeholder="Enter value"
-          className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-blue-500"
+          className="flex-1 p-2 border rounded dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500"
           disabled={isAnimating}
         />
         <button
@@ -83,20 +83,20 @@ const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, set
         <button
           onClick={pop}
           disabled={isAnimating || stack.length === 0}
-          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"
+          className="bg-green-500 text-black px-4 py-2 rounded disabled:opacity-50"
         >
           Pop
         </button>
         <button
           onClick={peek}
           disabled={isAnimating || stack.length === 0}
-          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"
+          className="bg-amber-500 text-black px-4 py-2 rounded disabled:opacity-50"
         >
           Peek
         </button>
         <button
           onClick={() => setStack([])}
-          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"
+          className="bg-red-500 text-white px-4 py-2 rounded col-span-2 sm:col-span-1"
           disabled={isAnimating}
         >
           Reset

app/visualizer/sorting/bubblesort/content.jsx

@@ -1,7 +1,29 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState } from "react";
 
 const content = () => {
+  const [theme, setTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem("theme") || "light";
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener("storage", updateTheme);
+    window.addEventListener("themeChange", updateTheme);
+
+    return () => {
+      window.removeEventListener("storage", updateTheme);
+      window.removeEventListener("themeChange", updateTheme);
+    };
+  }, []);
+
   const paragraph = [
     `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.`,
     `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 = () => {
     <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
       <div className="col-span-1">
         <div className="hidden md:block">
-          <iframe
-            src="https://hw.glich.co/resources/embed/daily/dsa"
-            width="100%"
-            height="400"
-            title="Daily DSA Challenge"
-          ></iframe>
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
         </div>
         <div className="flex justify-center">
           <span className="text-xs hidden md:block">
@@ -223,8 +252,37 @@ const content = () => {
           </div>
         </section>
       </article>
+
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="320"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Powered by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
     </main>
   );
 };
 
-export default content;
+export default content;

app/visualizer/sorting/insertionsort/content.jsx

@@ -1,7 +1,29 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState } from "react";
 
 const content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem('theme') || 'light';
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener('storage', updateTheme);
+    window.addEventListener('themeChange', updateTheme);
+
+    return () => {
+      window.removeEventListener('storage', updateTheme);
+      window.removeEventListener('themeChange', updateTheme);
+    };
+  }, []);
+
   const paragraph = [
     `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.`,
     `The algorithm maintains a "sorted sublist" that grows with each iteration.`,
@@ -73,12 +95,19 @@ const content = () => {
     <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
       <div className="col-span-1">
         <div className="hidden md:block">
-          <iframe
-            src="https://hw.glich.co/resources/embed/daily/dsa"
-            width="100%"
-            height="400"
-            title="Daily DSA Challenge"
-          ></iframe>
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
         </div>
         <div className="flex justify-center">
           <span className="text-xs hidden md:block">
@@ -241,6 +270,35 @@ const content = () => {
           </div>
         </section>
       </article>
+
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="320"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Powered by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
     </main>
   );
 };

app/visualizer/sorting/mergesort/content.jsx

@@ -1,7 +1,29 @@
 "use client";
 import ComplexityGraph from "@/app/components/ui/graph";
+import { useEffect, useState } from "react";
 
 const content = () => {
+  const [theme, setTheme] = useState('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const updateTheme = () => {
+      const savedTheme = localStorage.getItem('theme') || 'light';
+      setTheme(savedTheme);
+    };
+
+    updateTheme();
+    setMounted(true);
+
+    window.addEventListener('storage', updateTheme);
+    window.addEventListener('themeChange', updateTheme);
+
+    return () => {
+      window.removeEventListener('storage', updateTheme);
+      window.removeEventListener('themeChange', updateTheme);
+    };
+  }, []);
+
   const paragraph = [
     `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.`,
     `The log n factor comes from the division steps, while the n factor comes from the merge steps.`,
@@ -66,12 +88,19 @@ const content = () => {
     <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
       <div className="col-span-1">
         <div className="hidden md:block">
-          <iframe
-            src="https://hw.glich.co/resources/embed/daily/dsa"
-            width="100%"
-            height="400"
-            title="Daily DSA Challenge"
-          ></iframe>
+          {mounted && (
+            <iframe
+              key={theme}
+              src={
+                theme === "dark"
+                  ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                  : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+              }
+              width="100%"
+              height="400"
+              title="Daily DSA Challenge"
+            ></iframe>
+          )}
         </div>
         <div className="flex justify-center">
           <span className="text-xs hidden md:block">
@@ -230,6 +259,35 @@ const content = () => {
           </div>
         </section>
       </article>
+
+      {/* Mobile iframe at bottom */}
+      <div className="block md:hidden w-full">
+        {mounted && (
+          <iframe
+            key={theme}
+            src={
+              theme === "dark"
+                ? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
+                : "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
+            }
+            width="100%"
+            height="320"
+            title="Daily DSA Challenge"
+          ></iframe>
+        )}
+        <div className="flex justify-center pb-8">
+          <span className="text-xs">
+            Powered by{" "}
+            <a
+              href="https://hw.glich.co/resources/daily"
+              target="_blank"
+              className="underline hover:text-blue-500 duration-300"
+            >
+              Hello World
+            </a>
+          </span>
+        </div>
+      </div>
     </main>
   );
 };