Main1

app/api/auth/route.js

@@ -35,14 +35,17 @@ export async function POST(req) {
 
     if (action === 'signup') {
       // Create Supabase user with metadata
-      const { user, error } = await supabase.auth.signUp(
-        { email, password },
-        { data: { display_name: name } }
-      )
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: { display_name: name },
+        },
+      })
       if (error) {
         return new Response(JSON.stringify({ success: false, message: error.message }), { status: 400 })
       }
-      return new Response(JSON.stringify({ success: true, message: 'Signup successful! Check your email.' }), { status: 200 })
+      return new Response(JSON.stringify({ success: true, message: 'Signup successful. Verification email sent.', trigger: true }), { status: 200 })
     }
 
     else if (action === 'login') {

app/visualizer/queue/operations/enqueue-dequeue/codeBlock.jsx

@@ -323,14 +323,14 @@ int main() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.3 }}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
+        className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
       >
         {/* Header */}
-        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-neutral-950 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center mb-2 sm:mb-0">
             <FaCode className="text-blue-500 mr-2 text-lg" />
             <h3 className="text-lg font-semibold text-gray-800 dark:text-white">
-              Queue Implementation (Enqueue & Dequeue)
+              Queue (Enqueue & Dequeue)
             </h3>
           </div>
 

app/visualizer/queue/operations/enqueue-dequeue/content.jsx

@@ -1,4 +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 = [
     `A Queue is a linear data structure that follows the First-In-First-Out (FIFO) principle. Elements are added at the rear (enqueue) and removed from the front (dequeue). It operates much like a real-world queue (line) where the first person to arrive is the first to be served.`,
     `The space complexity is O(n) where n is the number of elements in the queue, as it needs to store all elements.`,
@@ -35,12 +60,40 @@ const content = () => {
   const complexity = [
     { points : "Enqueue Operation: O(1) - Constant time to add to the end" },
     { points : "Dequeue Operation: O(1) - Constant time to remove from the front" },
-    { points : "Peek Operation: O(1) - Constant time to examine the front element" },
   ];
 
     return (
-      <main className="max-w-4xl mx-auto">
-  <article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
+    <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">
+          {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">
+            Daily DSA Challenge 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>
+      <article className="col-span-4 max-w-4xl bg-white dark:bg-neutral-950 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
     {/* What is a Queue? */}
     <section className="p-6 border-b border-gray-100 dark:border-gray-700">
       <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -158,6 +211,15 @@ const content = () => {
             </li>
           ))}
         </ul>
+
+        <div className="mt-8">
+              <ComplexityGraph
+                bestCase={(n) => 1}
+                averageCase={(n) => 1}
+                worstCase={(n) => 1}
+                maxN={25}
+              />
+            </div>
       </div>
     </section>
 
@@ -177,14 +239,43 @@ const content = () => {
     {/* Additional Info */}
     <section className="p-6">
       <div className="prose dark:prose-invert max-w-none">
-        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+        <div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
           <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
             {paragraph[2]}
           </p>
         </div>
       </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">
+            Daily DSA Challenge 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/queue/operations/enqueue-dequeue/page.jsx

@@ -1,33 +1,121 @@
 import Animation from "@/app/visualizer/queue/operations/enqueue-dequeue/animation";
 import Navbar from "@/app/components/navbarinner";
+import Breadcrumbs from "@/app/components/ui/Breadcrumbs";
+import ArticleActions from "@/app/components/ui/ArticleActions";
+import Content from "@/app/visualizer/queue/operations/enqueue-dequeue/content";
+import Quiz from "@/app/visualizer/queue/operations/enqueue-dequeue/quiz";
+import Code from "@/app/visualizer/queue/operations/enqueue-dequeue/codeBlock";
+import ModuleCard from "@/app/components/ui/ModuleCard";
+import { MODULE_MAPS } from "@/lib/modulesMap";
+import ExploreOther from "@/app/components/ui/exploreOther";
+import Footer from "@/app/components/footer";
+import BackToTop from "@/app/components/ui/backtotop";
 
 export const metadata = {
-  title: 'Enqueue and Dequeue Operations in Queue | Learn Queue with JS, C, Python, Java Code',
-  description: 'Visualize and understand the Enqueue and Dequeue operations in a Queue with real-time animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview preparation.',
+  title:
+    "Enqueue and Dequeue Operations in Queue | Learn Queue with JS, C, Python, Java Code",
+  description:
+    "Visualize and understand the Enqueue and Dequeue operations in a Queue with real-time animations and code examples in JavaScript, C, Python, and Java. Perfect for DSA beginners and interview preparation.",
   keywords: [
-    'Enqueue Operation',
-    'Dequeue Operation',
-    'Queue Operations',
-    'Queue DSA',
-    'Queue Enqueue Dequeue',
-    'Learn Queue',
-    'Queue Visualization',
-    'Interactive DSA Tools',
-    'Queue Data Structure',
-    'Queue Code Examples',
-    'Enqueue Dequeue in JavaScript',
-    'Enqueue Dequeue in C',
-    'Enqueue Dequeue in Python',
-    'Enqueue Dequeue in Java',
+    "Enqueue Operation",
+    "Dequeue Operation",
+    "Queue Operations",
+    "Queue DSA",
+    "Queue Enqueue Dequeue",
+    "Learn Queue",
+    "Queue Visualization",
+    "Interactive DSA Tools",
+    "Queue Data Structure",
+    "Queue Code Examples",
+    "Enqueue Dequeue in JavaScript",
+    "Enqueue Dequeue in C",
+    "Enqueue Dequeue in Python",
+    "Enqueue Dequeue in Java",
   ],
   robots: "index, follow",
+  openGraph: {
+    images: [
+      {
+        url: "/og/queue/enqueueDequeue.png",
+        width: 1200,
+        height: 630,
+        alt: "Enqueue Dequeue Algorithm Visualization",
+      },
+    ],
+  },
 };
 
 export default function Page() {
+  const paths = [
+    { name: "Home", href: "/" },
+    { name: "Visualizer", href: "/visualizer" },
+    { name: "Enqueue-Dequeue", href: "" },
+  ];
+
   return (
     <>
-      <Navbar/>
-      <Animation />
+      <div>
+        <Navbar />
+      </div>
+
+      <div className="py-20 bg-gray-100 dark:bg-neutral-900 text-gray-800 dark:text-gray-200">
+        <section className="px-6 md:px-12">
+          <div className="mt-10 sm:mt-10 mb-4">
+            <Breadcrumbs paths={paths} />
+          </div>
+          <div className="flex items-center flex-col">
+            <div className="flex">
+              <p className="uppercase tracking-wide bg-green-500 dark:text-black px-4 py-1 mb-2 rounded-full">
+                Queue
+              </p>
+            </div>
+            <h1 className="text-4xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-0">
+              Enqueue & Dequeue
+            </h1>
+            <ArticleActions />
+          </div>
+          <div className="bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl my-10"></div>
+          <Content />
+        </section>
+
+        <section className="px-6">
+          <Animation />
+        </section>
+
+        <section className="px-6">
+          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
+            Test Your Knowledge before moving forward!
+          </p>
+          <Quiz />
+        </section>
+
+        <section className="px-6">
+          <Code />
+        </section>
+
+        <section className="px-6 md:px-12 my-12">
+          <ModuleCard
+            moduleId={MODULE_MAPS.enqueueDequeue}
+            title="Enqueue Dequeue"
+            description="Mark queue : enqueue & dequeue as done and view it on your dashboard"
+            initialDone={false}
+          />
+        </section>
+
+        <section className="px-6">
+          <ExploreOther
+            title="Explore Other Operations"
+            links={[
+              { text: "Peek Front", url: "./peek-front" },
+              { text: "Is Empty", url: "./isempty" },
+              { text: "Is Full", url: "./isfull" },
+            ]}
+          />
+        </section>
+      </div>
+
+      <BackToTop />
+      <Footer />
     </>
   );
-};
+}