-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathUrlConverterPage.jsx
More file actions
168 lines (156 loc) · 6.13 KB
/
UrlConverterPage.jsx
File metadata and controls
168 lines (156 loc) · 6.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import {
ArrowLeftIcon,
LinkIcon,
ArrowsLeftRightIcon,
CopySimpleIcon,
} from '@phosphor-icons/react';
import { useToast } from '../../hooks/useToast';
import Seo from '../../components/Seo';
import GenerativeArt from '../../components/GenerativeArt';
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
function UrlConverterPage() {
const [inputText, setInputText] = useState('');
const [outputText, setOutputText] = useState('');
const { addToast } = useToast();
const encodeUrl = () => {
try {
setOutputText(encodeURIComponent(inputText));
addToast({
title: 'Success',
message: 'URL string encoded.',
type: 'success',
});
} catch (error) {
addToast({
title: 'Error',
message: 'Failed to encode sequence.',
type: 'error',
});
setOutputText('');
}
};
const decodeUrl = () => {
try {
setOutputText(decodeURIComponent(inputText));
addToast({
title: 'Success',
message: 'URL string decoded.',
type: 'success',
});
} catch (error) {
addToast({
title: 'Error',
message: 'Invalid URL sequence.',
type: 'error',
});
setOutputText('');
}
};
const copyToClipboard = (text) => {
if (!text) return;
navigator.clipboard.writeText(text).then(() => {
addToast({
title: 'Copied',
message: 'Payload stored in clipboard.',
duration: 2000,
});
});
};
return (
<div className="min-h-screen bg-[#050505] text-white selection:bg-emerald-500/30 font-sans">
<Seo
title="URL Encoder | Fezcodex"
description="Protocol for encoding and decoding Uniform Resource Locators."
keywords={[
'Fezcodex',
'URL encoder',
'URL decoder',
'URL converter',
'web tools',
]}
/>
<div className="mx-auto max-w-7xl px-6 py-24 md:px-12">
<header className="mb-20">
<Link
to="/apps"
className="mb-8 inline-flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors uppercase tracking-widest"
>
<ArrowLeftIcon weight="bold" />
<span>Applications</span>
</Link>
<div className="flex flex-col md:flex-row md:items-end justify-between gap-12">
<div className="space-y-4">
<BreadcrumbTitle
title="URL Encoder"
slug="url"
variant="brutalist"
/>
<p className="text-xl text-gray-400 max-w-2xl font-light leading-relaxed">
Protocol for encoding and decoding Uniform Resource Locators.
Map arbitrary data into web-compliant character sequences.
</p>
</div>
</div>
</header>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Input Section */}
<div className="relative border border-white/10 bg-white/[0.02] p-8 rounded-sm group overflow-hidden">
<div className="absolute inset-0 opacity-5 pointer-events-none">
<GenerativeArt seed="URL_INPUT" className="w-full h-full" />
</div>
<div className="absolute top-0 left-0 w-1 h-0 group-hover:h-full bg-emerald-500 transition-all duration-500" />
<h3 className="font-mono text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-6 flex items-center gap-2">
<LinkIcon weight="fill" className="text-emerald-500" />
Input_Buffer
</h3>
<textarea
value={inputText}
onChange={(e) => setInputText(e.target.value)}
className="w-full h-64 bg-black/40 border border-white/5 p-6 font-mono text-sm text-gray-300 focus:border-emerald-500 focus:outline-none transition-all rounded-sm resize-none scrollbar-hide"
placeholder="Insert URL or plaintext sequence..."
/>
<div className="grid grid-cols-2 gap-4 mt-8">
<button
onClick={encodeUrl}
className="py-4 bg-white text-black font-black uppercase tracking-[0.2em] hover:bg-emerald-400 transition-all text-xs"
>
Encode
</button>
<button
onClick={decodeUrl}
className="py-4 bg-transparent border border-white text-white font-black uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-all text-xs"
>
Decode
</button>
</div>
</div>
{/* Output Section */}
<div className="relative border border-white/10 bg-white/[0.02] p-8 rounded-sm group overflow-hidden flex flex-col h-full">
<div className="absolute top-0 right-0 w-1 h-0 group-hover:h-full bg-emerald-500 transition-all duration-500" />
<h3 className="font-mono text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-6 flex items-center gap-2">
<ArrowsLeftRightIcon weight="fill" className="text-emerald-500" />
Output_Stream
</h3>
<textarea
value={outputText}
readOnly
className="flex-grow w-full h-64 bg-black/40 border border-white/5 p-4 font-mono text-sm text-emerald-400 focus:outline-none transition-all rounded-sm resize-none scrollbar-hide mb-6"
placeholder="Translation will appear here..."
/>
<button
onClick={() => copyToClipboard(outputText)}
disabled={!outputText}
className="w-full py-4 border border-white/10 text-gray-500 hover:text-white hover:border-white hover:bg-white/5 transition-all font-mono uppercase tracking-widest text-xs flex items-center justify-center gap-3 disabled:opacity-20"
>
<CopySimpleIcon weight="bold" size={18} />
Stage to Clipboard
</button>
</div>
</div>
</div>
</div>
);
}
export default UrlConverterPage;