Skip to content

Commit 657c5cd

Browse files
CipherYuvrajCipherYuvraj
authored
Merge pull request #37 from SujalTripathi/feat/string-visualizer-ui
feat: Create initial UI for String Visualizer
2 parents d6927f1 + 35a003d commit 657c5cd

2 files changed

Lines changed: 499 additions & 17 deletions

File tree

‎frontend/src/pages/StringVisualizer.jsx‎

Lines changed: 122 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,133 @@
11
import React, { useState } from 'react';
2-
import { useTheme } from '../contexts/ThemeContext';
2+
import { useTheme } from '../contexts/ThemeContext'; // Use the project's theme system
3+
import { Play, RotateCcw, Text, Hash } from 'lucide-react';
34

45
const StringVisualizer = () => {
5-
const { classes, getThemedGradient } = useTheme();
6-
const [algorithm, setAlgorithm] = useState('kmp');
7-
6+
const { classes } = useTheme(); // Get the theme classes
7+
const [text, setText] = useState('ababcabcabababd');
8+
const [pattern, setPattern] = useState('abababd');
9+
10+
const handleVisualize = () => console.log('Visualize clicked!', { text, pattern });
11+
const handleReset = () => {
12+
setText('');
13+
setPattern('');
14+
console.log('Reset clicked!');
15+
};
16+
817
return (
9-
<div className={`min-h-screen transition-all duration-500 py-8 ${classes.bgGradient}`}>
10-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
11-
<div className={`${classes.cardBg} border rounded-xl shadow-soft p-6`}>
12-
<h1 className={`text-3xl font-bold ${classes.textPrimary} mb-2`}>
13-
String Algorithm Visualizer
14-
</h1>
15-
<p className={classes.textSecondary}>
16-
Visualize pattern matching and string processing algorithms
17-
</p>
18+
// Use the theme's background class
19+
<div className={`w-full min-h-screen ${classes.bgPrimary} p-4 sm:p-8`}>
20+
{/* Spacer div */}
21+
<div className="h-24"></div>
22+
23+
{/* 1. Gradient Header Card */}
24+
<div className="max-w-7xl mx-auto p-6 mb-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl shadow-lg">
25+
<h1 className="text-4xl font-bold text-white tracking-tight">
26+
String Algorithm Visualizer
27+
</h1>
28+
<p className="mt-2 text-blue-100">
29+
Visualize pattern matching and string processing algorithms with ease.
30+
</p>
31+
</div>
32+
33+
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
34+
35+
{/* 2. Left Column: Inputs & Controls Card */}
36+
<div className="lg:col-span-1">
37+
<div className={`${classes.cardBg} p-6 rounded-xl shadow-md border ${classes.border}`}>
38+
<h2 className={`text-xl font-bold ${classes.textPrimary} mb-6 flex items-center gap-2`}>
39+
<Text size={22} className="text-indigo-500" />
40+
Inputs & Controls
41+
</h2>
42+
43+
<div className="mb-4">
44+
<label htmlFor="main-text" className={`block text-sm font-medium ${classes.textSecondary} mb-2`}>
45+
Main Text (Haystack)
46+
</label>
47+
<input
48+
id="main-text"
49+
type="text"
50+
value={text}
51+
onChange={(e) => setText(e.target.value)}
52+
className={`w-full p-3 ${classes.inputBg} ${classes.textPrimary} placeholder-slate-400 rounded-lg border ${classes.border} focus:outline-none focus:ring-2 focus:ring-indigo-500 transition`}
53+
placeholder="Enter text..."
54+
/>
55+
</div>
56+
57+
<div className="mb-6">
58+
<label htmlFor="pattern-text" className={`block text-sm font-medium ${classes.textSecondary} mb-2`}>
59+
Pattern to Find (Needle)
60+
</label>
61+
<input
62+
id="pattern-text"
63+
type="text"
64+
value={pattern}
65+
onChange={(e) => setPattern(e.target.value)}
66+
className={`w-full p-3 ${classes.inputBg} ${classes.textPrimary} placeholder-slate-400 rounded-lg border ${classes.border} focus:outline-none focus:ring-2 focus:ring-indigo-500 transition`}
67+
placeholder="Enter pattern..."
68+
/>
69+
</div>
70+
71+
<div className="flex flex-col sm:flex-row gap-4">
72+
<button
73+
onClick={handleVisualize}
74+
className="flex flex-1 items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition-transform transform hover:scale-105 shadow-md"
75+
>
76+
<Play size={20} />
77+
Visualize
78+
</button>
79+
<button
80+
onClick={handleReset}
81+
className="flex flex-1 items-center justify-center gap-2 bg-slate-500 hover:bg-slate-600 text-white font-semibold py-3 px-4 rounded-lg transition-transform transform hover:scale-105 shadow-md"
82+
>
83+
<RotateCcw size={20} />
84+
Reset
85+
</button>
86+
</div>
87+
</div>
1888
</div>
19-
20-
<div className={`${classes.cardBg} border rounded-xl shadow-soft p-6`}>
21-
<p className={classes.textSecondary}>String visualizer coming soon...</p>
89+
90+
{/* 3. Right Column: Display Area Card */}
91+
<div className="lg:col-span-2">
92+
<div className={`${classes.cardBg} p-6 rounded-xl shadow-md border ${classes.border} min-h-[300px]`}>
93+
<h2 className={`text-xl font-bold ${classes.textPrimary} mb-6 flex items-center gap-2`}>
94+
<Hash size={22} className="text-indigo-500" />
95+
Visualization
96+
</h2>
97+
98+
<div className="mb-6">
99+
<h3 className={`text-md font-semibold mb-3 ${classes.textSecondary}`}>Text</h3>
100+
<div className={`flex flex-wrap gap-1 p-3 ${classes.inputBg} rounded-lg`}>
101+
{text.split('').map((char, index) => (
102+
<div key={`text-${index}`} className="flex flex-col items-center">
103+
<div className={`flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 ${classes.cardBg} border ${classes.border} rounded-md text-lg font-mono ${classes.textPrimary}`}>
104+
{char}
105+
</div>
106+
<span className={`text-xs ${classes.textMuted} mt-1`}>{index}</span>
107+
</div>
108+
))}
109+
</div>
110+
</div>
111+
112+
<div>
113+
<h3 className={`text-md font-semibold mb-3 ${classes.textSecondary}`}>Pattern</h3>
114+
<div className={`flex flex-wrap gap-1 p-3 ${classes.inputBg} rounded-lg`}>
115+
{pattern.split('').map((char, index) => (
116+
<div key={`pattern-${index}`} className="flex flex-col items-center">
117+
<div className={`flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 ${classes.cardBg} border ${classes.border} rounded-md text-lg font-mono ${classes.textPrimary}`}>
118+
{char}
119+
</div>
120+
<span className={`text-xs ${classes.textMuted} mt-1`}>{index}</span>
121+
</div>
122+
))}
123+
</div>
124+
</div>
125+
</div>
22126
</div>
127+
23128
</div>
24129
</div>
25130
);
26131
};
27132

28-
export default StringVisualizer;
133+
export default StringVisualizer;

0 commit comments

Comments
 (0)