Skip to content

Commit 877cf78

Browse files
Sohan-RoutSohan-Rout
committed
Feat : updated stack using linked list
1 parent 0236b20 commit 877cf78

File tree

7 files changed

+183
-155
lines changed

7 files changed

+183
-155
lines changed

‎app/visualizer/stack/implementation/usingLinkedList/animation.jsx‎

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

‎app/visualizer/stack/implementation/usingLinkedList/codeBlock.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -452,10 +452,10 @@ int main() {
452452
initial={{ opacity: 0, y: 20 }}
453453
animate={{ opacity: 1, y: 0 }}
454454
transition={{ duration: 0.3 }}
455-
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"
455+
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"
456456
>
457457
{/* Header */}
458-
<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">
458+
<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">
459459
<div className="flex items-center mb-2 sm:mb-0">
460460
<FaCode className="text-blue-500 mr-2 text-lg" />
461461
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">

‎app/visualizer/stack/implementation/usingLinkedList/content.jsx‎

Lines changed: 82 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,29 @@
1-
const Content = () => {
1+
"use client";
2+
import React from "react";
3+
import { useEffect, useState } from "react";
4+
5+
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+
227
const paragraph = [
328
`A stack implemented using a linked list follows the LIFO (Last In First Out) principle. Unlike array implementation, linked list stacks dynamically allocate memory for each element and don't have size limitations (until memory is exhausted).`,
429
];
@@ -53,8 +78,37 @@ const Content = () => {
5378
];
5479

5580
return (
56-
<main className="max-w-4xl mx-auto">
57-
<article className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-8">
81+
<main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-4">
82+
<div className="col-span-1">
83+
<div className="hidden md:block">
84+
{mounted && (
85+
<iframe
86+
key={theme}
87+
src={
88+
theme === "dark"
89+
? "https://hw.glich.co/resources/embed/daily/dsa?theme=dark"
90+
: "https://hw.glich.co/resources/embed/daily/dsa?theme=light"
91+
}
92+
width="100%"
93+
height="400"
94+
title="Daily DSA Challenge"
95+
></iframe>
96+
)}
97+
</div>
98+
<div className="flex justify-center">
99+
<span className="text-xs hidden md:block">
100+
Daily DSA Challenge by{" "}
101+
<a
102+
href="https://hw.glich.co/resources/daily"
103+
target="_blank"
104+
className="underline hover:text-blue-500 duration-300"
105+
>
106+
Hello World
107+
</a>
108+
</span>
109+
</div>
110+
</div>
111+
<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">
58112
{/* Header Section */}
59113
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
60114
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -68,42 +122,22 @@ const Content = () => {
68122
</div>
69123
</section>
70124

71-
{/* Core Operations */}
72-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
73-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
74-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
75-
Core Stack Operations
76-
</h1>
77-
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
78-
{["push(item)", "pop()", "peek()", "isEmpty()", "size()"].map((op) => (
79-
<div
80-
key={op}
81-
className="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-center shadow-sm"
82-
>
83-
<span className="text-sm sm:text-base font-mono">
84-
{op}
85-
</span>
86-
</div>
87-
))}
88-
</div>
89-
</section>
90-
91125
{/* Algorithmic Steps */}
92126
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
93-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
94-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
95-
Algorithmic Steps
96-
</h1>
127+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
128+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
129+
Algorithmic Steps
130+
</h1>
97131

98132
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
99133
{/* Stack Basic Operations */}
100-
<div className="border-2 border-gray-400 dark:border-gray-500 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md">
134+
<div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
101135
<h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
102136
Stack Basic Operations
103137
</h2>
104138

105139
<div className="space-y-4">
106-
<div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
140+
<div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
107141
<ul className="space-y-3">
108142
{opeartions.map((item, index) => (
109143
<li key={index}>
@@ -127,13 +161,13 @@ const Content = () => {
127161
</div>
128162

129163
{/* Stack Helper Operations */}
130-
<div className="border-2 border-gray-400 dark:border-gray-500 rounded-lg p-4 bg-white dark:bg-gray-800 shadow-md">
164+
<div className="rounded-lg p-4 bg-white dark:bg-neutral-950 shadow-md">
131165
<h2 className="text-lg sm:text-xl mb-3 font-bold text-center">
132166
Stack Helper Operations
133167
</h2>
134168

135169
<div className="space-y-4">
136-
<div className="p-4 rounded-lg bg-gray-50 dark:bg-gray-700">
170+
<div className="p-4 rounded-lg bg-gray-50 dark:bg-neutral-900">
137171
<ul className="space-y-3">
138172
{helper.map((item, index) => (
139173
<li key={index}>
@@ -158,45 +192,6 @@ const Content = () => {
158192
</div>
159193
</section>
160194

161-
{/* Visual Representation */}
162-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
163-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
164-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
165-
Visual Representation
166-
</h1>
167-
<div className="flex flex-col items-center">
168-
<div className="w-full sm:w-80">
169-
<div className="flex flex-col items-center">
170-
<div className="flex items-center justify-center">
171-
<div className="w-16 h-8 border border-gray-400 flex items-center justify-center">
172-
Head
173-
</div>
174-
<div className="w-8 h-1 bg-gray-400"></div>
175-
<div className="w-20 h-12 border border-gray-400 rounded flex flex-col items-center justify-center">
176-
<div>8</div>
177-
<div className="text-xs">(top)</div>
178-
</div>
179-
</div>
180-
<div className="w-8 h-4 bg-gray-400 transform rotate-90"></div>
181-
<div className="w-20 h-12 border border-gray-400 rounded flex items-center justify-center">
182-
17
183-
</div>
184-
<div className="w-8 h-4 bg-gray-400 transform rotate-90"></div>
185-
<div className="w-20 h-12 border border-gray-400 rounded flex items-center justify-center">
186-
42
187-
</div>
188-
<div className="w-8 h-4 bg-gray-400 transform rotate-90"></div>
189-
<div className="w-20 h-12 border border-gray-400 rounded flex items-center justify-center">
190-
null
191-
</div>
192-
</div>
193-
</div>
194-
<div className="text-sm mt-3 text-center text-gray-700 dark:text-gray-300">
195-
Stack after operations: push(42), push(17), push(8)
196-
</div>
197-
</div>
198-
</section>
199-
200195
{/* Time Complexity */}
201196
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
202197
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
@@ -206,10 +201,10 @@ const Content = () => {
206201
<div className="prose dark:prose-invert max-w-none overflow-x-auto">
207202
<table className="min-w-full border-collapse border border-gray-400">
208203
<thead>
209-
<tr className="bg-gray-100 dark:bg-gray-700">
210-
<th className="border border-gray-400 p-3 font-semibold">Operation</th>
211-
<th className="border border-gray-400 p-3 font-semibold">Complexity</th>
212-
<th className="border border-gray-400 p-3 font-semibold hidden sm:table-cell">
204+
<tr className="bg-gray-100 dark:bg-blue-900">
205+
<th className="border border-blue-400 p-3 font-semibold">Operation</th>
206+
<th className="border border-blue-400 p-3 font-semibold">Complexity</th>
207+
<th className="border border-blue-400 p-3 font-semibold hidden sm:table-cell">
213208
Reason
214209
</th>
215210
</tr>
@@ -224,13 +219,13 @@ const Content = () => {
224219
].map(([op, comp, reason], index) => (
225220
<tr
226221
key={op}
227-
className={index % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700"}
222+
className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-blue-50 dark:bg-neutral-900"}
228223
>
229-
<td className="border border-gray-400 p-3">{op}</td>
230-
<td className="border border-gray-400 p-3 font-mono">
224+
<td className="border border-blue-400 p-3">{op}</td>
225+
<td className="border border-blue-400 p-3 font-mono">
231226
{comp}
232227
</td>
233-
<td className="border border-gray-400 p-3 hidden sm:table-cell">
228+
<td className="border border-blue-400 p-3 hidden sm:table-cell">
234229
{reason}
235230
</td>
236231
</tr>
@@ -272,10 +267,10 @@ const Content = () => {
272267
<div className="prose dark:prose-invert max-w-none overflow-x-auto">
273268
<table className="min-w-full border-collapse border border-gray-400">
274269
<thead>
275-
<tr className="bg-gray-100 dark:bg-gray-700">
276-
<th className="border border-gray-400 p-3 font-semibold">Feature</th>
277-
<th className="border border-gray-400 p-3 font-semibold">Linked List</th>
278-
<th className="border border-gray-400 p-3 font-semibold">Array</th>
270+
<tr className="bg-gray-100 dark:bg-blue-900">
271+
<th className="border border-blue-400 p-3 font-semibold">Feature</th>
272+
<th className="border border-blue-400 p-3 font-semibold">Linked List</th>
273+
<th className="border border-blue-400 p-3 font-semibold">Array</th>
279274
</tr>
280275
</thead>
281276
<tbody>
@@ -288,13 +283,13 @@ const Content = () => {
288283
].map(([feature, ll, arr], index) => (
289284
<tr
290285
key={feature}
291-
className={index % 2 === 0 ? "bg-white dark:bg-gray-800" : "bg-gray-50 dark:bg-gray-700"}
286+
className={index % 2 === 0 ? "bg-white dark:bg-neutral-950" : "bg-gray-50 dark:bg-neutral-900"}
292287
>
293-
<td className="border border-gray-400 p-3">{feature}</td>
294-
<td className="border border-gray-400 p-3 font-mono">
288+
<td className="border border-blue-400 p-3">{feature}</td>
289+
<td className="border border-blue-400 p-3 font-mono">
295290
{ll}
296291
</td>
297-
<td className="border border-gray-400 p-3 font-mono">
292+
<td className="border border-blue-400 p-3 font-mono">
298293
{arr}
299294
</td>
300295
</tr>
@@ -308,4 +303,4 @@ const Content = () => {
308303
);
309304
};
310305

311-
export default Content;
306+
export default content;

0 commit comments

Comments
 (0)