Skip to content

Commit ccc8d45

Browse files
Sohan-RoutSohan-Rout
committed
Fix : added graph
1 parent cfda0b8 commit ccc8d45

File tree

1 file changed

+170
-144
lines changed

1 file changed

+170
-144
lines changed

‎app/visualizer/stack/isfull/content.jsx‎

Lines changed: 170 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,24 @@ import ComplexityGraph from "@/app/components/ui/graph";
33
import { useEffect, useState } from "react";
44

55
const content = () => {
6-
const [theme, setTheme] = useState('light');
6+
const [theme, setTheme] = useState("light");
77
const [mounted, setMounted] = useState(false);
88

99
useEffect(() => {
1010
const updateTheme = () => {
11-
const savedTheme = localStorage.getItem('theme') || 'light';
11+
const savedTheme = localStorage.getItem("theme") || "light";
1212
setTheme(savedTheme);
1313
};
1414

1515
updateTheme();
1616
setMounted(true);
1717

18-
window.addEventListener('storage', updateTheme);
19-
window.addEventListener('themeChange', updateTheme);
18+
window.addEventListener("storage", updateTheme);
19+
window.addEventListener("themeChange", updateTheme);
2020

2121
return () => {
22-
window.removeEventListener('storage', updateTheme);
23-
window.removeEventListener('themeChange', updateTheme);
22+
window.removeEventListener("storage", updateTheme);
23+
window.removeEventListener("themeChange", updateTheme);
2424
};
2525
}, []);
2626

@@ -30,32 +30,31 @@ const content = () => {
3030
];
3131

3232
const working = [
33-
{ points : "Returns true if the stack cannot accept more elements." },
34-
{ points : "Returns false if the stack can accept more elements." },
35-
{ points : "For dynamic stacks (no fixed size), this operation typically always returns false." },
36-
{ points : "Often used with Push operations to prevent stack overflow." },
33+
{ points: "Returns true if the stack cannot accept more elements." },
34+
{ points: "Returns false if the stack can accept more elements." },
35+
{
36+
points:
37+
"For dynamic stacks (no fixed size), this operation typically always returns false.",
38+
},
39+
{ points: "Often used with Push operations to prevent stack overflow." },
3740
];
3841

3942
const complexity = [
40-
{ points : "Fixed-size Stack:",
41-
subpoints : [
42-
"Time Complexity: O(1)",
43-
"Space Complexity: O(1)",
44-
],
45-
},
46-
{ points : "Dynamic Stack:",
47-
subpoints : [
48-
"Time Complexity: O(1)",
49-
"Space Complexity: O(1)",
50-
],
51-
},
43+
{
44+
points: "Fixed-size Stack:",
45+
subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
46+
},
47+
{
48+
points: "Dynamic Stack:",
49+
subpoints: ["Time Complexity: O(1)", "Space Complexity: O(1)"],
50+
},
5251
];
5352

5453
const useCase = [
55-
{ points : "Preventing stack overflow in memory-constrained systems." },
56-
{ points : "Implementing bounded buffers or fixed-size caches." },
57-
{ points : "Memory management in embedded systems." },
58-
{ points : "Validating stack capacity before push operations" },
54+
{ points: "Preventing stack overflow in memory-constrained systems." },
55+
{ points: "Implementing bounded buffers or fixed-size caches." },
56+
{ points: "Memory management in embedded systems." },
57+
{ points: "Validating stack capacity before push operations" },
5958
];
6059

6160
return (
@@ -90,130 +89,157 @@ const content = () => {
9089
</div>
9190
</div>
9291
<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">
93-
{/* What is the "Is Full" Operation? */}
94-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
95-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
96-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
97-
What is the "Is Full" Operation?
98-
</h1>
99-
<div className="prose dark:prose-invert max-w-none">
100-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
101-
{paragraphs[0]}
102-
</p>
103-
</div>
104-
</section>
105-
106-
{/* How It Works */}
107-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
108-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
109-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
110-
How It Works
111-
</h1>
112-
<div className="prose dark:prose-invert max-w-none">
113-
<ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
114-
{working.map((item, index) => (
115-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
116-
{item.points}
117-
</li>
118-
))}
119-
</ul>
120-
</div>
121-
</section>
122-
123-
{/* Time and Space Complexity */}
124-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
125-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
126-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
127-
Time and Space Complexity
128-
</h1>
129-
<div className="prose dark:prose-invert max-w-none">
130-
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
131-
Here's the time and space complexity analysis for stack operations:
132-
</p>
133-
<ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
134-
{complexity.map((item, index) => (
135-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
136-
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
137-
{item.points.split(':')[0]}:
138-
</span>
139-
<span className="ml-2">{item.points.split(':')[1]}</span>
140-
{item.subpoints && (
141-
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
142-
{item.subpoints.map((subitem, subindex) => (
143-
<li key={subindex} className="text-gray-600 dark:text-gray-400">
144-
{subitem}
145-
</li>
146-
))}
147-
</ul>
148-
)}
149-
</li>
150-
))}
151-
</ul>
152-
</div>
153-
</section>
154-
155-
{/* Practical Example */}
156-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
157-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
158-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
159-
Practical Example
160-
</h1>
161-
<div className="prose dark:prose-invert max-w-none">
162-
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
163-
Consider a stack with maximum capacity of 3 elements:
164-
</p>
165-
<div className="space-y-4 mt-4">
166-
<div className="flex items-center">
167-
<div className="w-32 font-mono">Stack: [ ]</div>
168-
<div className="ml-4 font-medium">
169-
isFull() → <span className="text-red-500 dark:text-red-400">false</span>
92+
{/* What is the "Is Full" Operation? */}
93+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
94+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
95+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
96+
What is the "Is Full" Operation?
97+
</h1>
98+
<div className="prose dark:prose-invert max-w-none">
99+
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
100+
{paragraphs[0]}
101+
</p>
102+
</div>
103+
</section>
104+
105+
{/* How It Works */}
106+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
107+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
108+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
109+
How It Works
110+
</h1>
111+
<div className="prose dark:prose-invert max-w-none">
112+
<ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
113+
{working.map((item, index) => (
114+
<li
115+
key={index}
116+
className="text-gray-700 dark:text-gray-300 pl-2"
117+
>
118+
{item.points}
119+
</li>
120+
))}
121+
</ul>
122+
</div>
123+
</section>
124+
125+
{/* Time and Space Complexity */}
126+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
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+
Time and Space Complexity
130+
</h1>
131+
<div className="prose dark:prose-invert max-w-none">
132+
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
133+
Here's the time and space complexity analysis for stack
134+
operations:
135+
</p>
136+
<ul className="space-y-3 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
137+
{complexity.map((item, index) => (
138+
<li
139+
key={index}
140+
className="text-gray-700 dark:text-gray-300 pl-2"
141+
>
142+
<span className="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
143+
{item.points.split(":")[0]}:
144+
</span>
145+
<span className="ml-2">{item.points.split(":")[1]}</span>
146+
{item.subpoints && (
147+
<ul className="mt-2 space-y-2 list-disc pl-5 marker:text-gray-400 dark:marker:text-gray-500">
148+
{item.subpoints.map((subitem, subindex) => (
149+
<li
150+
key={subindex}
151+
className="text-gray-600 dark:text-gray-400"
152+
>
153+
{subitem}
154+
</li>
155+
))}
156+
</ul>
157+
)}
158+
</li>
159+
))}
160+
</ul>
161+
162+
<div className="mt-8">
163+
<ComplexityGraph
164+
bestCase={(n) => 1}
165+
averageCase={(n) => 1}
166+
worstCase={(n) => 1}
167+
maxN={25}
168+
/>
170169
</div>
171170
</div>
172-
<div className="flex items-center">
173-
<div className="w-32 font-mono">Stack: [5, 3]</div>
174-
<div className="ml-4 font-medium">
175-
isFull() → <span className="text-red-500 dark:text-red-400">false</span>
171+
</section>
172+
173+
{/* Practical Example */}
174+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
175+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
176+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
177+
Practical Example
178+
</h1>
179+
<div className="prose dark:prose-invert max-w-none">
180+
<p className="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed">
181+
Consider a stack with maximum capacity of 3 elements:
182+
</p>
183+
<div className="space-y-4 mt-4">
184+
<div className="flex items-center">
185+
<div className="w-32 font-mono">Stack: [ ]</div>
186+
<div className="ml-4 font-medium">
187+
isFull() →{" "}
188+
<span className="text-red-500 dark:text-red-400">false</span>
189+
</div>
190+
</div>
191+
<div className="flex items-center">
192+
<div className="w-32 font-mono">Stack: [5, 3]</div>
193+
<div className="ml-4 font-medium">
194+
isFull() →{" "}
195+
<span className="text-red-500 dark:text-red-400">false</span>
196+
</div>
197+
</div>
198+
<div className="flex items-center">
199+
<div className="w-32 font-mono">Stack: [7, 3, 5]</div>
200+
<div className="ml-4 font-medium">
201+
isFull() →{" "}
202+
<span className="text-green-600 dark:text-green-400">
203+
true
204+
</span>
205+
</div>
206+
</div>
176207
</div>
177208
</div>
178-
<div className="flex items-center">
179-
<div className="w-32 font-mono">Stack: [7, 3, 5]</div>
180-
<div className="ml-4 font-medium">
181-
isFull() → <span className="text-green-600 dark:text-green-400">true</span>
209+
</section>
210+
211+
{/* Common Use Cases */}
212+
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
213+
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
214+
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
215+
Common Use Cases
216+
</h1>
217+
<div className="prose dark:prose-invert max-w-none">
218+
<ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
219+
{useCase.map((item, index) => (
220+
<li
221+
key={index}
222+
className="text-gray-700 dark:text-gray-300 pl-2"
223+
>
224+
{item.points}
225+
</li>
226+
))}
227+
</ul>
228+
</div>
229+
</section>
230+
231+
{/* Additional Info */}
232+
<section className="p-6">
233+
<div className="prose dark:prose-invert max-w-none">
234+
<div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
235+
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
236+
{paragraphs[1]}
237+
</p>
182238
</div>
183239
</div>
184-
</div>
185-
</div>
186-
</section>
187-
188-
{/* Common Use Cases */}
189-
<section className="p-6 border-b border-gray-100 dark:border-gray-700">
190-
<h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
191-
<span className="w-1 h-6 bg-blue-500 mr-3 rounded-full"></span>
192-
Common Use Cases
193-
</h1>
194-
<div className="prose dark:prose-invert max-w-none">
195-
<ul className="space-y-2 list-disc pl-5 marker:text-gray-500 dark:marker:text-gray-400">
196-
{useCase.map((item, index) => (
197-
<li key={index} className="text-gray-700 dark:text-gray-300 pl-2">
198-
{item.points}
199-
</li>
200-
))}
201-
</ul>
202-
</div>
203-
</section>
204-
205-
{/* Additional Info */}
206-
<section className="p-6">
207-
<div className="prose dark:prose-invert max-w-none">
208-
<div className="px-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
209-
<p className="text-gray-700 dark:text-gray-300 leading-relaxed">
210-
{paragraphs[1]}
211-
</p>
212-
</div>
213-
</div>
214-
</section>
215-
</article>
216-
</main>
240+
</section>
241+
</article>
242+
</main>
217243
);
218244
};
219245

0 commit comments

Comments
 (0)