Skip to content

Commit 7a97cb0

Browse files
devvsakibdevvsakib
committed
Add YAML Formatter component and update availability in DevArea
1 parent 9e1c1a0 commit 7a97cb0

5 files changed

Lines changed: 376 additions & 52 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"axios": "^1.2.2",
1717
"classnames": "^2.5.1",
1818
"framer-motion": "^10.8.3",
19+
"js-yaml": "^4.1.0",
1920
"lodash": "^4.17.21",
2021
"lucide-react": "^0.544.0",
2122
"prettier": "^3.3.3",

‎src/components/DevAreaTools/YAMLFormatter.jsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React, { useState } from "react";
2+
import yaml from "js-yaml";
3+
4+
export default function YAMLFormatter() {
5+
const [input, setInput] = useState("");
6+
const [output, setOutput] = useState("");
7+
const [error, setError] = useState(null);
8+
9+
const handleFormat = () => {
10+
setError(null);
11+
try {
12+
const parsed = yaml.load(input);
13+
const formatted = yaml.dump(parsed, { indent: 2 });
14+
setOutput(formatted);
15+
} catch (err) {
16+
setError("Invalid YAML syntax.");
17+
}
18+
};
19+
20+
const handleMinify = () => {
21+
setError(null);
22+
try {
23+
const parsed = yaml.load(input);
24+
const minified = yaml.dump(parsed, { indent: 0, flowLevel: -1 }).replace(/\n/g, "");
25+
setOutput(minified);
26+
} catch (err) {
27+
setError("Invalid YAML syntax.");
28+
}
29+
};
30+
31+
const handleClear = () => {
32+
setInput("");
33+
setOutput("");
34+
setError(null);
35+
};
36+
37+
return (
38+
<div className="min-h-screen text-white p-8 font-sans">
39+
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-amber-500 drop-shadow-[0_0_10px_rgba(251,191,36,0.6)]">
40+
🧾 YAML Formatter
41+
</h2>
42+
43+
<div className="max-w-3xl mx-auto bg-[#111827]/70 border border-[#1e293b] rounded-2xl p-6 backdrop-blur-sm shadow-[0_0_20px_rgba(251,191,36,0.15)]">
44+
<p className="text-sm text-slate-400 mb-4 text-center">
45+
Paste your YAML below to <span className="text-amber-400 font-medium">format</span> or <span className="text-amber-400 font-medium">minify</span>.
46+
</p>
47+
48+
<textarea
49+
value={input}
50+
onChange={(e) => setInput(e.target.value)}
51+
placeholder="Paste YAML here..."
52+
className="w-full min-h-[100px] p-3 rounded-xl bg-[#0f172a] border border-slate-700 focus:border-amber-500 text-sm mb-4 outline-none text-slate-200"
53+
/>
54+
55+
<div className="flex gap-3 justify-center mb-5">
56+
<button
57+
onClick={handleFormat}
58+
className="px-5 py-2 rounded-lg bg-gradient-to-r from-amber-500 to-yellow-400 hover:from-amber-400 hover:to-yellow-300 shadow-[0_0_12px_rgba(251,191,36,0.4)] transition-all"
59+
>
60+
Format
61+
</button>
62+
<button
63+
onClick={handleMinify}
64+
className="px-5 py-2 rounded-lg border border-slate-600 hover:border-amber-400 transition-all"
65+
>
66+
Minify
67+
</button>
68+
<button
69+
onClick={handleClear}
70+
className="px-5 py-2 rounded-lg border border-slate-600 hover:border-amber-400 transition-all"
71+
>
72+
Clear
73+
</button>
74+
</div>
75+
76+
{error && (
77+
<div className="mb-5 p-3 rounded-md bg-red-900/30 border border-red-500/30 text-red-300 text-sm">
78+
{error}
79+
</div>
80+
)}
81+
82+
<div>
83+
<h3 className="font-semibold text-amber-400 mb-2">Output</h3>
84+
<pre className="mt-2 p-3 rounded-md bg-[#0f172a] border border-slate-700 h-60 overflow-auto text-xs text-slate-300 whitespace-pre-wrap">
85+
{output || "No formatted YAML yet"}
86+
</pre>
87+
</div>
88+
</div>
89+
90+
<p className="mt-6 text-center text-xs text-slate-500">
91+
🟡 This tool formats YAML locally in your browser.
92+
</p>
93+
</div>
94+
);
95+
}

‎src/pages/DevArea/DevTools.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import JWTDecoder from "../../components/DevAreaTools/JwtDecoder";
66
import URLEncoderDecoder from "../../components/DevAreaTools/URLEncoderDecoder";
77
import XmlFormatter from "../../components/DevAreaTools/XmlFormatter";
88
import Base64Tool from "../../components/DevAreaTools/Base64Tool";
9+
import YAMLFormatter from "../../components/DevAreaTools/YAMLFormatter";
10+
import PasswordGenerator from "../../components/DevAreaTools/PasswordGenerator";
911

1012
const DevTools = () => {
1113
const { tool } = useParams();
@@ -16,7 +18,9 @@ const DevTools = () => {
1618
"json-formatter": <JSONFormatter />,
1719
"url-encoder-decoder": <URLEncoderDecoder />,
1820
"xml-formatter": <XmlFormatter />,
21+
"yaml-formatter": <YAMLFormatter />,
1922
"base64": <Base64Tool />,
23+
"password-generator": <PasswordGenerator />,
2024
}
2125

2226

‎src/pages/DevArea/index.jsx‎

Lines changed: 137 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,10 @@ const DevArea = () => {
2626
isAvailable: true
2727
},
2828
{
29-
name: "URL Encoder/Decoder",
30-
link: "/devarea/url-encoder-decoder",
31-
isAvailable: true
29+
name: "URL Encoder/Decoder",
30+
link: "/devarea/url-encoder-decoder",
31+
isAvailable: true
3232
},
33-
3433
{
3534
name: "XML Formatter",
3635
link: "/devarea/xml-formatter",
@@ -39,13 +38,146 @@ const DevArea = () => {
3938
{
4039
name: "YAML Formatter",
4140
link: "/devarea/yaml-formatter",
42-
isAvailable: false
41+
isAvailable: true
4342
},
4443
{
4544
name: "CSV Formatter",
4645
link: "/devarea/csv-formatter",
4746
isAvailable: false
4847
},
48+
// Text & String Tools
49+
{
50+
name: "Text Diff Checker",
51+
link: "/devarea/text-diff",
52+
isAvailable: false
53+
},
54+
{
55+
name: "Case Converter",
56+
link: "/devarea/case-converter",
57+
isAvailable: false
58+
},
59+
{
60+
name: "String Length Counter",
61+
link: "/devarea/string-counter",
62+
isAvailable: false
63+
},
64+
{
65+
name: "Lorem Ipsum Generator",
66+
link: "/devarea/lorem-ipsum",
67+
isAvailable: false
68+
},
69+
// Encoding & Hashing
70+
{
71+
name: "Hash Generator (MD5, SHA)",
72+
link: "/devarea/hash-generator",
73+
isAvailable: false
74+
},
75+
{
76+
name: "UUID Generator",
77+
link: "/devarea/uuid-generator",
78+
isAvailable: false
79+
},
80+
{
81+
name: "HTML Encoder/Decoder",
82+
link: "/devarea/html-encoder-decoder",
83+
isAvailable: false
84+
},
85+
// Code & Data
86+
{
87+
name: "SQL Formatter",
88+
link: "/devarea/sql-formatter",
89+
isAvailable: false
90+
},
91+
{
92+
name: "Regex Tester",
93+
link: "/devarea/regex-tester",
94+
isAvailable: false
95+
},
96+
{
97+
name: "JSON to CSV",
98+
link: "/devarea/json-to-csv",
99+
isAvailable: false
100+
},
101+
{
102+
name: "CSV to JSON",
103+
link: "/devarea/csv-to-json",
104+
isAvailable: false
105+
},
106+
{
107+
name: "Code Minifier",
108+
link: "/devarea/code-minifier",
109+
isAvailable: false
110+
},
111+
{
112+
name: "Code Beautifier",
113+
link: "/devarea/code-beautifier",
114+
isAvailable: false
115+
},
116+
// Color & Design
117+
{
118+
name: "Color Converter",
119+
link: "/devarea/color-converter",
120+
isAvailable: false
121+
},
122+
{
123+
name: "Color Picker",
124+
link: "/devarea/color-picker",
125+
isAvailable: false
126+
},
127+
{
128+
name: "Gradient Generator",
129+
link: "/devarea/gradient-generator",
130+
isAvailable: false
131+
},
132+
// Time & Date
133+
{
134+
name: "Unix Timestamp Converter",
135+
link: "/devarea/timestamp-converter",
136+
isAvailable: false
137+
},
138+
{
139+
name: "Cron Expression Generator",
140+
link: "/devarea/cron-generator",
141+
isAvailable: false
142+
},
143+
// Image & Media
144+
{
145+
name: "Image to Base64",
146+
link: "/devarea/image-to-base64",
147+
isAvailable: false
148+
},
149+
{
150+
name: "QR Code Generator",
151+
link: "/devarea/qr-code-generator",
152+
isAvailable: false
153+
},
154+
// Network & API
155+
{
156+
name: "API Tester",
157+
link: "/devarea/api-tester",
158+
isAvailable: false
159+
},
160+
{
161+
name: "HTTP Status Codes",
162+
link: "/devarea/http-status-codes",
163+
isAvailable: false
164+
},
165+
{
166+
name: "IP Address Lookup",
167+
link: "/devarea/ip-lookup",
168+
isAvailable: false
169+
},
170+
// Security
171+
{
172+
name: "Password Generator",
173+
link: "/devarea/password-generator",
174+
isAvailable: true
175+
},
176+
{
177+
name: "Bcrypt Generator/Checker",
178+
link: "/devarea/bcrypt",
179+
isAvailable: true
180+
}
49181
]
50182
return <Layout>
51183
<div className="px-5 md:px-10">

0 commit comments

Comments
 (0)