Skip to content

Commit 5456226

Browse files
Sohan-RoutSohan-Rout
committed
feat : added daily dsa and layout update to stack push and pop
1 parent c3b1f0e commit 5456226

8 files changed

Lines changed: 522 additions & 395 deletions

File tree

‎app/components/ui/PushPop.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@ const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, set
6161
};
6262

6363
return (
64-
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
64+
<div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md mb-4 border border-gray-200 dark:border-gray-700">
6565
<div className="flex flex-col sm:flex-row gap-2 mb-4">
6666
<input
6767
type="text"
6868
value={inputValue}
6969
onChange={(e) => setInputValue(e.target.value)}
7070
placeholder="Enter value"
71-
className="flex-1 p-2 border rounded dark:bg-gray-700 focus:ring-2 focus:ring-blue-500"
71+
className="flex-1 p-2 border rounded dark:bg-neutral-900 focus:ring-2 focus:ring-blue-500"
7272
disabled={isAnimating}
7373
/>
7474
<button
@@ -83,20 +83,20 @@ const PushPop = ({ stack, setStack, isAnimating, setIsAnimating, setMessage, set
8383
<button
8484
onClick={pop}
8585
disabled={isAnimating || stack.length === 0}
86-
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"
86+
className="bg-green-500 text-black px-4 py-2 rounded disabled:opacity-50"
8787
>
8888
Pop
8989
</button>
9090
<button
9191
onClick={peek}
9292
disabled={isAnimating || stack.length === 0}
93-
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"
93+
className="bg-amber-500 text-black px-4 py-2 rounded disabled:opacity-50"
9494
>
9595
Peek
9696
</button>
9797
<button
9898
onClick={() => setStack([])}
99-
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"
99+
className="bg-red-500 text-white px-4 py-2 rounded col-span-2 sm:col-span-1"
100100
disabled={isAnimating}
101101
>
102102
Reset

‎app/visualizer/stack/push-pop/animation.jsx‎

Lines changed: 102 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,117 @@
1-
'use client';
2-
import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
3-
import { gsap } from 'gsap';
4-
import GoBackButton from "@/app/components/ui/goback";
5-
import Footer from '@/app/components/footer';
6-
import Content from '@/app/visualizer/stack/push-pop/content';
7-
import ExploreOther from '@/app/components/ui/exploreOther';
8-
import PushPop from '@/app/components/ui/PushPop';
9-
import CodeBlock from '@/app/visualizer/stack/push-pop/codeBlock';
10-
import Quiz from '@/app/visualizer/stack/push-pop/quiz';
11-
import BackToTop from '@/app/components/ui/backtotop';
1+
"use client";
2+
import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
3+
import { gsap } from "gsap";
4+
import PushPop from "@/app/components/ui/PushPop";
125

136
const StackVisualizer = () => {
14-
const [stack, setStack] = useState([]);
15-
const [operation, setOperation] = useState(null);
16-
const [message, setMessage] = useState('Stack is empty');
17-
const [isAnimating, setIsAnimating] = useState(false);
18-
const stackRefs = useRef([]);
7+
const [stack, setStack] = useState([]);
8+
const [operation, setOperation] = useState(null);
9+
const [message, setMessage] = useState("Stack is empty");
10+
const [isAnimating, setIsAnimating] = useState(false);
11+
const stackRefs = useRef([]);
1912

20-
// Reset stack
21-
const reset = () => {
22-
setStack([]);
23-
setMessage('Stack is empty');
24-
setOperation(null);
25-
};
13+
// Reset stack
14+
const reset = () => {
15+
setStack([]);
16+
setMessage("Stack is empty");
17+
setOperation(null);
18+
};
2619

27-
useEffect(() => {
28-
if (isAnimating && stackRefs.current.length > 0) {
29-
const el = stackRefs.current[0];
30-
if (operation?.includes("pushed")) {
31-
gsap.fromTo(el, { y: -50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.5, ease: "power3.out" });
32-
} else if (operation?.includes("popped")) {
33-
gsap.to(el, { y: 50, opacity: 0, duration: 0.3, ease: "power1.in" });
34-
} else if (operation?.includes("Peek")) {
35-
gsap.fromTo(el, { scale: 1 }, { scale: 1.2, yoyo: true, repeat: 1, duration: 0.2 });
36-
}
20+
useEffect(() => {
21+
if (isAnimating && stackRefs.current.length > 0) {
22+
const el = stackRefs.current[0];
23+
if (operation?.includes("pushed")) {
24+
gsap.fromTo(
25+
el,
26+
{ y: -50, opacity: 0 },
27+
{ y: 0, opacity: 1, duration: 0.5, ease: "power3.out" }
28+
);
29+
} else if (operation?.includes("popped")) {
30+
gsap.to(el, { y: 50, opacity: 0, duration: 0.3, ease: "power1.in" });
31+
} else if (operation?.includes("Peek")) {
32+
gsap.fromTo(
33+
el,
34+
{ scale: 1 },
35+
{ scale: 1.2, yoyo: true, repeat: 1, duration: 0.2 }
36+
);
3737
}
38-
}, [stack, operation, isAnimating]);
38+
}
39+
}, [stack, operation, isAnimating]);
3940

40-
return (
41-
<div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
42-
<main className="container mx-auto px-6 pt-16 pb-4">
41+
return (
42+
<main className="container mx-auto px-6 pb-8">
43+
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
44+
Visualize the LIFO (Last In, First Out) principle
45+
</p>
4346

44-
{ /* go back block here */}
45-
<div className="mt-10 sm:mt-10">
46-
<GoBackButton />
47-
</div>
47+
<div className="max-w-4xl mx-auto">
48+
{/* Use the PushPop component */}
49+
<PushPop
50+
stack={stack}
51+
setStack={setStack}
52+
isAnimating={isAnimating}
53+
setIsAnimating={setIsAnimating}
54+
setMessage={setMessage}
55+
setOperation={setOperation}
56+
/>
4857

49-
{ /* main logic here */}
50-
<h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
51-
<span className="text-black dark:text-white">Stack Push & Pop</span>
52-
</h1>
53-
<div className='bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5'></div>
54-
<Content />
55-
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
56-
Visualize the LIFO (Last In, First Out) principle
57-
</p>
58-
59-
<div className="max-w-md mx-auto">
60-
{/* Use the PushPop component */}
61-
<PushPop
62-
stack={stack}
63-
setStack={setStack}
64-
isAnimating={isAnimating}
65-
setIsAnimating={setIsAnimating}
66-
setMessage={setMessage}
67-
setOperation={setOperation}
68-
/>
69-
70-
{/* Stack Visualization */}
71-
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
72-
<h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>
73-
74-
{/* Operation Status */}
75-
{operation && (
76-
<div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
77-
{operation}
78-
</div>
79-
)}
80-
81-
{/* Message Display */}
82-
{message && (
83-
<div className={`mb-4 p-3 rounded-lg ${
84-
message.includes('pushed') ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' :
85-
message.includes('popped') ? 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200' :
86-
message.includes('Peek') ? 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200' :
87-
'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
88-
}`}>
89-
{message}
90-
</div>
91-
)}
92-
93-
{/* Vertical Stack */}
94-
<div className="flex flex-col items-center min-h-[300px]">
95-
{/* Top indicator */}
96-
<div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
97-
{stack.length > 0 ? '↑ Top' : ''}
58+
{/* Stack Visualization */}
59+
<div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
60+
<h2 className="text-xl font-semibold mb-4">Stack Visualization</h2>
61+
62+
{/* Operation Status */}
63+
{operation && (
64+
<div className="mb-4 p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
65+
{operation}
66+
</div>
67+
)}
68+
69+
{/* Vertical Stack */}
70+
<div className="flex flex-col items-center min-h-[300px]">
71+
{/* Top indicator */}
72+
<div className="mb-2 text-sm text-gray-600 dark:text-gray-400">
73+
{stack.length > 0 ? "↑ Top" : ""}
74+
</div>
75+
76+
{/* Stack elements */}
77+
<div className="w-32 relative">
78+
{stack.length === 0 ? (
79+
<div className="text-center py-8 text-gray-500">
80+
<span>Stack is empty</span>
9881
</div>
99-
100-
{/* Stack elements */}
101-
<div className="w-32 relative">
102-
{stack.length === 0 ? (
103-
<div className="text-center py-8 text-gray-500">
104-
Stack is empty
105-
</div>
106-
) : (
107-
<div className="space-y-1">
108-
{stack.map((item, index) => (
109-
<div
110-
key={index}
111-
ref={el => stackRefs.current[index] = el}
112-
className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
113-
index === 0 ?
114-
'bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700' :
115-
'bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600'
116-
}`}
117-
>
118-
<div>{item}</div>
119-
{index === 0 && (
120-
<div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
121-
(Top)
122-
</div>
123-
)}
82+
) : (
83+
<div className="space-y-1">
84+
{stack.map((item, index) => (
85+
<div
86+
key={index}
87+
ref={(el) => (stackRefs.current[index] = el)}
88+
className={`p-3 border-2 rounded text-center font-medium transition-all duration-300 ${
89+
index === 0
90+
? "bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700"
91+
: "bg-white dark:bg-gray-700 border-gray-200 dark:border-gray-600"
92+
}`}
93+
>
94+
<div>{item}</div>
95+
{index === 0 && (
96+
<div className="text-xs mt-1 text-gray-500 dark:text-gray-400">
97+
(Top)
12498
</div>
125-
))}
99+
)}
126100
</div>
127-
)}
128-
</div>
129-
130-
{/* Bottom indicator */}
131-
<div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
132-
{stack.length > 0 ? '↓ Bottom' : ''}
101+
))}
133102
</div>
134-
</div>
103+
)}
135104
</div>
136-
</div>
137105

138-
{ /* quiz block here */}
139-
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
140-
Test Your Knowledge before moving forward!
141-
</p>
142-
<Quiz />
143-
144-
<CodeBlock/>
145-
<ExploreOther
146-
title="Explore other operations"
147-
links={[
148-
{ text: "Peek", url: "/visualizer/stack/peek" },
149-
{ text: "Is Empty", url: "/visualizer/stack/isempty" },
150-
{ text: "Is Full", url: "/visualizer/stack/isfull" },
151-
]}
152-
/>
153-
</main>
154-
<div className="bg-gray-700 z-10 h-[1px]"></div>
155-
<BackToTop/>
156-
<Footer />
106+
{/* Bottom indicator */}
107+
<div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
108+
{stack.length > 0 ? "↓ Bottom" : ""}
109+
</div>
110+
</div>
111+
</div>
157112
</div>
158-
);
159-
};
160-
161-
export default StackVisualizer;
113+
</main>
114+
);
115+
};
116+
117+
export default StackVisualizer;

‎app/visualizer/stack/push-pop/codeBlock.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -305,10 +305,10 @@ int main() {
305305
initial={{ opacity: 0, y: 20 }}
306306
animate={{ opacity: 1, y: 0 }}
307307
transition={{ duration: 0.3 }}
308-
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"
308+
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"
309309
>
310310
{/* Header */}
311-
<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">
311+
<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">
312312
<div className="flex items-center mb-2 sm:mb-0">
313313
<FaCode className="text-blue-500 mr-2 text-lg" />
314314
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">

0 commit comments

Comments
 (0)