-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCaseConverterPage.jsx
More file actions
166 lines (156 loc) · 6.43 KB
/
CaseConverterPage.jsx
File metadata and controls
166 lines (156 loc) · 6.43 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
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { ArrowLeftIcon, TextAaIcon, CodeIcon } from '@phosphor-icons/react';
import { useToast } from '../../hooks/useToast';
import Seo from '../../components/Seo';
import GenerativeArt from '../../components/GenerativeArt';
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
import BrutalistOutputCard from '../../components/BrutalistOutputCard';
function CaseConverterPage() {
const [inputText, setInputText] = useState('');
const { addToast } = useToast();
const convertToUpperCase = () => inputText.toUpperCase();
const convertToLowerCase = () => inputText.toLowerCase();
const convertToTitleCase = () =>
inputText.toLowerCase().replace(/\b\w/g, (char) => char.toUpperCase());
const convertToPascalCase = () =>
inputText
.toLowerCase()
.replace(/(?:^|\s+)([a-z])/g, (_, char) => char.toUpperCase())
.replace(/\s+/g, '');
const convertToCamelCase = () => {
const pascal = convertToPascalCase();
return pascal.charAt(0).toLowerCase() + pascal.slice(1);
};
const convertToSnakeCase = () => inputText.toLowerCase().replace(/\s+/g, '_');
const convertToKebabCase = () => inputText.toLowerCase().replace(/\s+/g, '-');
const convertToSentenceCase = () =>
inputText.charAt(0).toUpperCase() + inputText.slice(1).toLowerCase();
const copyToClipboard = (text) => {
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="Case Converter | Fezcodex"
description="Transform text case into various structural formats."
keywords={[
'Fezcodex',
'case converter',
'uppercase',
'lowercase',
'camelcase',
]}
/>
<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="Case Converter"
slug="cc"
variant="brutalist"
/>
<p className="text-xl text-gray-400 max-w-2xl font-light leading-relaxed">
Text transformation protocol. Map character strings to specific
case conventions.
</p>
</div>
</div>
</header>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
{/* Input Module */}
<div className="lg:col-span-5 space-y-8">
<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="CASE_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">
<TextAaIcon 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-lg text-gray-300 focus:border-emerald-500 focus:outline-none transition-all rounded-sm resize-none scrollbar-hide"
placeholder="Insert plaintext sequence..."
/>
</div>
</div>
{/* Outputs Column */}
<div className="lg:col-span-7 space-y-6">
<h3 className="font-mono text-[10px] font-bold text-gray-500 uppercase tracking-widest flex items-center gap-2 px-2">
<CodeIcon weight="fill" className="text-emerald-500" />
Transformed_States
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<BrutalistOutputCard
title="Uppercase"
description="ALL CHARACTERS CAPITALIZED"
value={convertToUpperCase()}
onCopy={copyToClipboard}
/>
<BrutalistOutputCard
title="Lowercase"
description="all characters lowercase"
value={convertToLowerCase()}
onCopy={copyToClipboard}
/>
<BrutalistOutputCard
title="Title Case"
description="Capitalize Every Word"
value={convertToTitleCase()}
onCopy={copyToClipboard}
/>
<BrutalistOutputCard
title="Sentence Case"
description="Capitalize only the first word"
value={convertToSentenceCase()}
onCopy={copyToClipboard}
/>
<BrutalistOutputCard
title="Camel Case"
description="lowerCaseThenCapitalize"
value={convertToCamelCase()}
onCopy={copyToClipboard}
/>
<BrutalistOutputCard
title="Pascal Case"
description="CapitalizeEveryWordNoSpaces"
value={convertToPascalCase()}
onCopy={copyToClipboard}
/>
<BrutalistOutputCard
title="Snake Case"
description="lowercase_with_underscores"
value={convertToSnakeCase()}
onCopy={copyToClipboard}
/>
<BrutalistOutputCard
title="Kebab Case"
description="lowercase-with-hyphens"
value={convertToKebabCase()}
onCopy={copyToClipboard}
/>
</div>
</div>
</div>
</div>
</div>
);
}
export default CaseConverterPage;