Skip to content

Commit db42873

Browse files
Sohan-RoutSohan-Rout
committed
Fix : added queue linked list implementation
1 parent 59d7a2e commit db42873

5 files changed

Lines changed: 182 additions & 177 deletions

File tree

‎app/visualizer/queue/implementation/linkedList/animation.jsx‎

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

‎app/visualizer/queue/implementation/linkedList/codeBlock.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -350,14 +350,14 @@ int main() {
350350
initial={{ opacity: 0, y: 20 }}
351351
animate={{ opacity: 1, y: 0 }}
352352
transition={{ duration: 0.3 }}
353-
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"
353+
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"
354354
>
355355
{/* Header */}
356-
<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">
356+
<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">
357357
<div className="flex items-center mb-2 sm:mb-0">
358358
<FaCode className="text-blue-500 mr-2 text-lg" />
359359
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
360-
Queue Implementation (Enqueue & Dequeue)
360+
Implementation Enqueue & Dequeue
361361
</h3>
362362
</div>
363363

‎app/visualizer/queue/implementation/linkedList/content.jsx‎

Lines changed: 85 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,28 @@
1+
"use client";
2+
import { useEffect, useState } from "react";
3+
14
const content = () => {
5+
const [theme, setTheme] = useState("light");
6+
const [mounted, setMounted] = useState(false);
7+
8+
useEffect(() => {
9+
const updateTheme = () => {
10+
const savedTheme = localStorage.getItem("theme") || "light";
11+
setTheme(savedTheme);
12+
};
13+
14+
updateTheme();
15+
setMounted(true);
16+
17+
window.addEventListener("storage", updateTheme);
18+
window.addEventListener("themeChange", updateTheme);
19+
20+
return () => {
21+
window.removeEventListener("storage", updateTheme);
22+
window.removeEventListener("themeChange", updateTheme);
23+
};
24+
}, []);
25+
226
const paragraph = [
327
`Implementing a Queue using a linked list provides dynamic memory allocation and efficient insertion/removal operations. Unlike array implementation, linked list queues don't have fixed capacity limitations and can grow dynamically as needed.`,
428
`Each node in the linked list contains the data and a pointer to the next node. The front pointer points to the first node (for dequeue), while the rear pointer points to the last node (for enqueue).`,
@@ -13,26 +37,6 @@ const content = () => {
1337
{ points: "Maintain proper pointer connections during operations" },
1438
];
1539

16-
const llImplementationCode = [
17-
{ code: "class Node {" },
18-
{ code: " constructor(data) {" },
19-
{ code: " this.data = data;" },
20-
{ code: " this.next = null;" },
21-
{ code: " }" },
22-
{ code: "}" },
23-
{ code: "" },
24-
{ code: "class LinkedListQueue {" },
25-
{ code: " constructor() {" },
26-
{ code: " this.front = null;" },
27-
{ code: " this.rear = null;" },
28-
{ code: " this.size = 0;" },
29-
{ code: " }" },
30-
{ code: "" },
31-
{ code: " isEmpty() {" },
32-
{ code: " return this.front === null;" },
33-
{ code: " }" },
34-
];
35-
3640
const enqueueAlgorithm = [
3741
{ points: "Create a new node with the given data" },
3842
{ points: "If queue is empty, set both front and rear to the new node" },
@@ -64,17 +68,38 @@ const content = () => {
6468
{ points: "Cons: Not cache-friendly (nodes may be scattered in memory)" },
6569
];
6670

67-
const visualization = [
68-
{ step: "Initial empty queue:", state: "front → null, rear → null" },
69-
{ step: "Enqueue(10):", state: "front → [10|•] → null, rear → [10|•]" },
70-
{ step: "Enqueue(20):", state: "front → [10|•] → [20|•] → null, rear → [20|•]" },
71-
{ step: "Enqueue(30):", state: "front → [10|•] → [20|•] → [30|•] → null, rear → [30|•]" },
72-
{ step: "Dequeue():", state: "Returns 10, front → [20|•] → [30|•] → null, rear → [30|•]" },
73-
];
74-
7571
return (
76-
<main className="max-w-4xl mx-auto">
77-
<article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
72+
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
73+
<div className="col-span-1">
74+
<div className="hidden md:block">
75+
{mounted && (
76+
<iframe
77+
key={theme}
78+
src={
79+
theme === "dark"
80+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
81+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
82+
}
83+
width="100%"
84+
height="400"
85+
title="Daily DSA Challenge"
86+
></iframe>
87+
)}
88+
</div>
89+
<div className="flex justify-center">
90+
<span className="text-xs hidden md:block">
91+
Daily DSA Challenge by{" "}
92+
<a
93+
href="https://hw.glich.co/resources/daily"
94+
target="_blank"
95+
className="underline hover:text-blue-500 duration-300"
96+
>
97+
Hello World
98+
</a>
99+
</span>
100+
</div>
101+
</div>
102+
<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">
78103
{/* Queue Linked List Implementation Overview */}
79104
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
80105
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -105,28 +130,6 @@ const content = () => {
105130
</div>
106131
</section>
107132

108-
{/* Basic Structure */}
109-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
110-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
111-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
112-
Basic Class Structure
113-
</h1>
114-
<div className="prose dark:prose-invert max-w-none">
115-
<pre className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto">
116-
<code className="text-sm font-mono text-gray-800 dark:text-gray-200">
117-
{llImplementationCode.map((item, index) => (
118-
<div key={index}>{item.code}</div>
119-
))}
120-
</code>
121-
</pre>
122-
<div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
123-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
124-
<strong>Note:</strong> Each node contains the data and a reference to the next node. The queue maintains references to both ends (front and rear) for efficient operations.
125-
</p>
126-
</div>
127-
</div>
128-
</section>
129-
130133
{/* Enqueue Algorithm */}
131134
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
132135
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -141,23 +144,6 @@ const content = () => {
141144
</li>
142145
))}
143146
</ol>
144-
<div className="mt-4 flex justify-center">
145-
<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
146-
<div className="flex items-center space-x-4">
147-
<div className="text-sm text-gray-600 dark:text-gray-300">Before Enqueue:</div>
148-
<div className="flex items-center">
149-
<div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">front → [A|•] → [B|•] → null</div>
150-
</div>
151-
</div>
152-
<div className="mt-2 flex items-center space-x-4">
153-
<div className="text-sm text-gray-600 dark:text-gray-300">After Enqueue(C):</div>
154-
<div className="flex items-center">
155-
<div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">front → [A|•] → [B|•] → [C|•] → null</div>
156-
<div className="ml-2 text-sm text-gray-500 dark:text-gray-400">(rear updated)</div>
157-
</div>
158-
</div>
159-
</div>
160-
</div>
161147
</div>
162148
</section>
163149

@@ -175,49 +161,6 @@ const content = () => {
175161
</li>
176162
))}
177163
</ol>
178-
<div className="mt-4 flex justify-center">
179-
<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
180-
<div className="flex items-center space-x-4">
181-
<div className="text-sm text-gray-600 dark:text-gray-300">Before Dequeue:</div>
182-
<div className="flex items-center">
183-
<div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">front → [A|•] → [B|•] → [C|•] → null</div>
184-
</div>
185-
</div>
186-
<div className="mt-2 flex items-center space-x-4">
187-
<div className="text-sm text-gray-600 dark:text-gray-300">After Dequeue():</div>
188-
<div className="flex items-center">
189-
<div className="px-3 py-1 bg-gray-200 dark:bg-gray-600 rounded">front → [B|•] → [C|•] → null</div>
190-
<div className="ml-2 text-sm text-gray-500 dark:text-gray-400">(returns A)</div>
191-
</div>
192-
</div>
193-
</div>
194-
</div>
195-
</div>
196-
</section>
197-
198-
{/* Visualization */}
199-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
200-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
201-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
202-
Operation Visualization
203-
</h1>
204-
<div className="prose dark:prose-invert max-w-none">
205-
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
206-
<thead className="bg-gray-50 dark:bg-gray-700">
207-
<tr>
208-
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Step</th>
209-
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Queue State</th>
210-
</tr>
211-
</thead>
212-
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
213-
{visualization.map((item, index) => (
214-
<tr key={index}>
215-
<td className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300">{item.step}</td>
216-
<td className="px-4 py-2 text-sm font-mono text-gray-900 dark:text-gray-200">{item.state}</td>
217-
</tr>
218-
))}
219-
</tbody>
220-
</table>
221164
</div>
222165
</section>
223166

@@ -261,7 +204,7 @@ const content = () => {
261204
{/* Additional Info */}
262205
<section className="p-6">
263206
<div className="prose dark:prose-invert max-w-none">
264-
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
207+
<div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
265208
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">When to Use Linked List Queue</h3>
266209
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
267210
{paragraph[2]}
@@ -275,6 +218,35 @@ const content = () => {
275218
</div>
276219
</section>
277220
</article>
221+
222+
{/* Mobile iframe at bottom */}
223+
<div className="block md:hidden w-full">
224+
{mounted && (
225+
<iframe
226+
key={theme}
227+
src={
228+
theme === "dark"
229+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
230+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
231+
}
232+
width="100%"
233+
height="320"
234+
title="Daily DSA Challenge"
235+
></iframe>
236+
)}
237+
<div className="flex justify-center pb-8">
238+
<span className="text-xs">
239+
Daily DSA Challenge by{" "}
240+
<a
241+
href="https://hw.glich.co/resources/daily"
242+
target="_blank"
243+
className="underline hover:text-blue-500 duration-300"
244+
>
245+
Hello World
246+
</a>
247+
</span>
248+
</div>
249+
</div>
278250
</main>
279251
);
280252
};

0 commit comments

Comments
 (0)