Skip to content

Commit 16f528a

Browse files
gkamradtgkamradt
committed
change typer
1 parent 48d1159 commit 16f528a

File tree

2 files changed

+309
-75
lines changed

2 files changed

+309
-75
lines changed

‎src/pages/AsciiTyper.tsx‎

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const PRESET_COLORS = [
2323

2424
export function AsciiTyper() {
2525
const [lines, setLines] = useState<TextLine[]>([
26-
{ id: '1', text: '' }
26+
{ id: '1', text: 'Hello! World!' }
2727
]);
2828
const [backgroundColor, setBackgroundColor] = useState('#000000');
2929
const [textColor, setTextColor] = useState('#22c55e');
@@ -89,7 +89,80 @@ export function AsciiTyper() {
8989
</p>
9090
</div>
9191

92-
{/* Controls */}
92+
{/* ASCII Preview - Hero Section */}
93+
<div className="mb-8">
94+
<div className="flex justify-between items-center mb-4">
95+
<h3 className="text-lg font-semibold" style={{ color: textColor }}>
96+
ASCII Preview
97+
</h3>
98+
<button
99+
onClick={copyToClipboard}
100+
className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded transition-colors"
101+
>
102+
Copy to Clipboard
103+
</button>
104+
</div>
105+
106+
<div
107+
className="p-6 rounded-lg border-2 font-mono text-xs leading-tight overflow-auto"
108+
style={{
109+
backgroundColor: backgroundColor,
110+
borderColor: textColor,
111+
color: textColor
112+
}}
113+
>
114+
<pre>
115+
{generatePreview().map((line, index) => (
116+
<div key={index} className="whitespace-pre">
117+
{line || '\u00A0'} {/* Non-breaking space for empty lines */}
118+
</div>
119+
))}
120+
</pre>
121+
</div>
122+
</div>
123+
124+
{/* Text Input Lines */}
125+
<div className="mb-8">
126+
<div className="flex justify-between items-center mb-4">
127+
<h3 className="text-lg font-semibold" style={{ color: textColor }}>
128+
Text Lines
129+
</h3>
130+
<button
131+
onClick={addNewLine}
132+
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors flex items-center gap-2"
133+
>
134+
<span className="text-xl">+</span>
135+
Add Line
136+
</button>
137+
</div>
138+
139+
<div className="space-y-3">
140+
{lines.map((line, index) => (
141+
<div key={line.id} className="flex gap-3 items-center">
142+
<span className="text-sm font-mono w-8" style={{ color: textColor }}>
143+
{index + 1}:
144+
</span>
145+
<input
146+
type="text"
147+
value={line.text}
148+
onChange={(e) => updateLineText(line.id, e.target.value)}
149+
placeholder="Type your text here..."
150+
className="flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
151+
/>
152+
{lines.length > 1 && (
153+
<button
154+
onClick={() => removeLine(line.id)}
155+
className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition-colors"
156+
>
157+
×
158+
</button>
159+
)}
160+
</div>
161+
))}
162+
</div>
163+
</div>
164+
165+
{/* Color Controls */}
93166
<div className="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
94167
{/* Background Color */}
95168
<div>
@@ -144,79 +217,6 @@ export function AsciiTyper() {
144217
</div>
145218
</div>
146219

147-
{/* Text Input Lines */}
148-
<div className="mb-6">
149-
<div className="flex justify-between items-center mb-4">
150-
<h3 className="text-lg font-semibold" style={{ color: textColor }}>
151-
Text Lines
152-
</h3>
153-
<button
154-
onClick={addNewLine}
155-
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors flex items-center gap-2"
156-
>
157-
<span className="text-xl">+</span>
158-
Add Line
159-
</button>
160-
</div>
161-
162-
<div className="space-y-3">
163-
{lines.map((line, index) => (
164-
<div key={line.id} className="flex gap-3 items-center">
165-
<span className="text-sm font-mono w-8" style={{ color: textColor }}>
166-
{index + 1}:
167-
</span>
168-
<input
169-
type="text"
170-
value={line.text}
171-
onChange={(e) => updateLineText(line.id, e.target.value)}
172-
placeholder="Type your text here..."
173-
className="flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
174-
/>
175-
{lines.length > 1 && (
176-
<button
177-
onClick={() => removeLine(line.id)}
178-
className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition-colors"
179-
>
180-
×
181-
</button>
182-
)}
183-
</div>
184-
))}
185-
</div>
186-
</div>
187-
188-
{/* Preview */}
189-
<div className="mb-6">
190-
<div className="flex justify-between items-center mb-4">
191-
<h3 className="text-lg font-semibold" style={{ color: textColor }}>
192-
ASCII Preview
193-
</h3>
194-
<button
195-
onClick={copyToClipboard}
196-
className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded transition-colors"
197-
>
198-
Copy to Clipboard
199-
</button>
200-
</div>
201-
202-
<div
203-
className="p-6 rounded-lg border-2 font-mono text-xs leading-tight overflow-auto"
204-
style={{
205-
backgroundColor: backgroundColor,
206-
borderColor: textColor,
207-
color: textColor
208-
}}
209-
>
210-
<pre>
211-
{generatePreview().map((line, index) => (
212-
<div key={index} className="whitespace-pre">
213-
{line || '\u00A0'} {/* Non-breaking space for empty lines */}
214-
</div>
215-
))}
216-
</pre>
217-
</div>
218-
</div>
219-
220220
{/* Instructions */}
221221
<div className="text-sm opacity-70" style={{ color: textColor }}>
222222
<p>• Type in the text fields above to see ASCII art generated in real-time</p>

0 commit comments

Comments
 (0)