Skip to content

Commit 32d5885

Browse files
fezcodefezcode
committed
feat: new apps
1 parent 08bf419 commit 32d5885

File tree

1 file changed

+246
-0
lines changed

1 file changed

+246
-0
lines changed

‎src/pages/apps/AsciiConverterPage.js‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
import React, { useState } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { ArrowLeftIcon } from '@phosphor-icons/react';
4+
import colors from '../../config/colors';
5+
import usePageTitle from '../../utils/usePageTitle';
6+
import { useToast } from '../../hooks/useToast';
7+
8+
function AsciiConverterPage() {
9+
usePageTitle('Text to ASCII Converter');
10+
const [inputText, setInputText] = useState('');
11+
const [asciiOutput, setAsciiOutput] = useState('');
12+
const [binaryOutput, setBinaryOutput] = useState('');
13+
const { addToast } = useToast();
14+
15+
const textToAscii = () => {
16+
try {
17+
const ascii = inputText.split('').map(char => char.charCodeAt(0)).join(' ');
18+
setAsciiOutput(ascii);
19+
} catch (error) {
20+
addToast({
21+
title: 'Error',
22+
message: 'Failed to convert text to ASCII.',
23+
duration: 3000,
24+
});
25+
setAsciiOutput('');
26+
}
27+
};
28+
29+
const asciiToText = () => {
30+
try {
31+
const text = inputText.split(' ').map(code => String.fromCharCode(parseInt(code, 10))).join('');
32+
setAsciiOutput(text);
33+
} catch (error) {
34+
addToast({
35+
title: 'Error',
36+
message: 'Failed to convert ASCII to text. Invalid ASCII string.',
37+
duration: 3000,
38+
});
39+
setAsciiOutput('');
40+
}
41+
};
42+
43+
const textToBinary = () => {
44+
try {
45+
const binary = inputText.split('').map(char => char.charCodeAt(0).toString(2).padStart(8, '0')).join(' ');
46+
setBinaryOutput(binary);
47+
} catch (error) {
48+
addToast({
49+
title: 'Error',
50+
message: 'Failed to convert text to Binary.',
51+
duration: 3000,
52+
});
53+
setBinaryOutput('');
54+
}
55+
};
56+
57+
const binaryToText = () => {
58+
try {
59+
const text = inputText.split(' ').map(bin => String.fromCharCode(parseInt(bin, 2))).join('');
60+
setBinaryOutput(text);
61+
} catch (error) {
62+
addToast({
63+
title: 'Error',
64+
message: 'Failed to convert Binary to text. Invalid Binary string.',
65+
duration: 3000,
66+
});
67+
setBinaryOutput('');
68+
}
69+
};
70+
71+
const copyToClipboard = (text) => {
72+
navigator.clipboard.writeText(text)
73+
.then(() => {
74+
addToast({
75+
title: 'Success',
76+
message: 'Copied to clipboard!',
77+
duration: 2000,
78+
});
79+
})
80+
.catch(() => {
81+
addToast({
82+
title: 'Error',
83+
message: 'Failed to copy!',
84+
duration: 2000,
85+
});
86+
});
87+
};
88+
89+
const cardStyle = {
90+
backgroundColor: colors['app-alpha-10'],
91+
borderColor: colors['app-alpha-50'],
92+
color: colors.app,
93+
};
94+
95+
const detailTextColor = colors['app-light'];
96+
97+
return (
98+
<div className="py-16 sm:py-24">
99+
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
100+
<Link
101+
to="/apps"
102+
className="text-article hover:underline flex items-center justify-center gap-2 text-lg mb-4"
103+
>
104+
<ArrowLeftIcon size={24} /> Back to Apps
105+
</Link>
106+
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center">
107+
<span className="codex-color">fc</span>
108+
<span className="separator-color">::</span>
109+
<span className="apps-color">apps</span>
110+
<span className="separator-color">::</span>
111+
<span className="single-app-color">ascii</span>
112+
</h1>
113+
<hr className="border-gray-700" />
114+
<div className="flex justify-center items-center mt-16">
115+
<div
116+
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl"
117+
style={cardStyle}
118+
>
119+
<div
120+
className="absolute top-0 left-0 w-full h-full opacity-10"
121+
style={{
122+
backgroundImage:
123+
'radial-gradient(circle, white 1px, transparent 1px)',
124+
backgroundSize: '10px 10px',
125+
}}
126+
></div>
127+
<div className="relative z-10 p-1">
128+
<div className="mb-4">
129+
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>Input Text</label>
130+
<textarea
131+
className="w-full h-32 p-4 bg-gray-900/50 font-mono resize-y border rounded-md focus:ring-0"
132+
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
133+
value={inputText}
134+
onChange={(e) => setInputText(e.target.value)}
135+
placeholder="Enter text or ASCII codes (space-separated) to convert..."
136+
/>
137+
</div>
138+
<div className="flex justify-center gap-4 mb-4">
139+
<button
140+
onClick={textToAscii}
141+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
142+
style={{
143+
backgroundColor: 'rgba(0, 0, 0, 0.2)',
144+
color: cardStyle.color,
145+
borderColor: cardStyle.borderColor,
146+
border: '1px solid',
147+
'--hover-bg-color': colors['app-alpha-50'],
148+
}}
149+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
150+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
151+
>
152+
Text to ASCII
153+
</button>
154+
<button
155+
onClick={asciiToText}
156+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
157+
style={{
158+
backgroundColor: 'rgba(0, 0, 0, 0.2)',
159+
color: cardStyle.color,
160+
borderColor: cardStyle.borderColor,
161+
border: '1px solid',
162+
'--hover-bg-color': colors['app-alpha-50'],
163+
}}
164+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
165+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
166+
>
167+
ASCII to Text
168+
</button>
169+
</div>
170+
<div className="flex justify-center gap-4 mb-4">
171+
<button
172+
onClick={textToBinary}
173+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
174+
style={{
175+
backgroundColor: 'rgba(0, 0, 0, 0.2)',
176+
color: cardStyle.color,
177+
borderColor: cardStyle.borderColor,
178+
border: '1px solid',
179+
'--hover-bg-color': colors['app-alpha-50'],
180+
}}
181+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
182+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
183+
>
184+
Text to Binary
185+
</button>
186+
<button
187+
onClick={binaryToText}
188+
className="px-6 py-2 rounded-md text-lg font-arvo font-normal transition-colors duration-300 ease-in-out"
189+
style={{
190+
backgroundColor: 'rgba(0, 0, 0, 0.2)',
191+
color: cardStyle.color,
192+
borderColor: cardStyle.borderColor,
193+
border: '1px solid',
194+
'--hover-bg-color': colors['app-alpha-50'],
195+
}}
196+
onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'var(--hover-bg-color)'}
197+
onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'}
198+
>
199+
Binary to Text
200+
</button>
201+
</div>
202+
<div>
203+
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>ASCII Output</label>
204+
<div className="relative">
205+
<textarea
206+
readOnly
207+
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md mb-4"
208+
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
209+
value={asciiOutput}
210+
placeholder="Converted ASCII will appear here..."
211+
/>
212+
<button
213+
onClick={() => copyToClipboard(asciiOutput)}
214+
className="absolute top-2 right-2 px-3 py-1 bg-gray-700 text-white text-sm rounded hover:bg-gray-600"
215+
>
216+
Copy
217+
</button>
218+
</div>
219+
</div>
220+
<div>
221+
<label className="block text-lg font-semibold mb-2" style={{ color: cardStyle.color }}>Binary Output</label>
222+
<div className="relative">
223+
<textarea
224+
readOnly
225+
className="w-full h-32 p-4 bg-gray-800/50 font-mono resize-y border rounded-md"
226+
style={{ borderColor: cardStyle.borderColor, color: detailTextColor }}
227+
value={binaryOutput}
228+
placeholder="Converted Binary will appear here..."
229+
/>
230+
<button
231+
onClick={() => copyToClipboard(binaryOutput)}
232+
className="absolute top-2 right-2 px-3 py-1 bg-gray-700 text-white text-sm rounded hover:bg-gray-600"
233+
>
234+
Copy
235+
</button>
236+
</div>
237+
</div>
238+
</div>
239+
</div>
240+
</div>
241+
</div>
242+
</div>
243+
);
244+
}
245+
246+
export default AsciiConverterPage;

0 commit comments

Comments
 (0)