Add XML Formatter component and update styles #282

- Implemented XmlFormatter component for formatting XML input.
- Updated index.css to enhance textarea and input styles.
- Registered XmlFormatter in DevTools and marked it as available in the DevArea.

Author: devvsakib

src/components/DevAreaTools/XmlFormatter.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+// import { button } from "@/components/ui/button";
+// import { textarea } from "@/components/ui/textarea";
+
+const XmlFormatter = () => {
+  const [input, setInput] = useState("");
+  const [output, setOutput] = useState("");
+
+  const formatXml = (xml) => {
+    try {
+      const PADDING = "  ";
+      const reg = /(>)(<)(\/*)/g;
+      let formatted = "";
+      let pad = 0;
+
+      xml = xml.replace(reg, "$1\r\n$2$3");
+      xml.split("\r\n").forEach((node) => {
+        let indent = 0;
+        if (node.match(/.+<\/\w[^>]*>$/)) indent = 0;
+        else if (node.match(/^<\/\w/)) {
+          if (pad !== 0) pad -= 1;
+        } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) indent = 1;
+        formatted += PADDING.repeat(pad) + node + "\r\n";
+        pad += indent;
+      });
+      return formatted.trim();
+    } catch {
+      return "Invalid XML input.";
+    }
+  };
+
+  const handleFormat = () => {
+    try {
+      const parser = new DOMParser();
+      const xmlDoc = parser.parseFromString(input, "application/xml");
+      const parseError = xmlDoc.getElementsByTagName("parsererror");
+      if (parseError.length) throw new Error("Invalid XML");
+      setOutput(formatXml(input));
+    } catch {
+      setOutput("❌ Invalid XML structure");
+    }
+  };
+
+  const handleClear = () => {
+    setInput("");
+    setOutput("");
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-2xl mx-auto">
+      <h2 className="text-xl font-semibold text-slate-800">XML Formatter</h2>
+      <textarea
+        placeholder="Paste your XML here..."
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        className="resize-none border border-slate-300"
+        rows={6}
+      />
+
+      <div className="flex gap-2">
+        <button onClick={handleFormat}>Format</button>
+        <button onClick={handleClear} variant="outline">Clear</button>
+      </div>
+
+      <textarea
+        placeholder="Formatted XML output..."
+        value={output}
+        readOnly
+        className="resize-none border border-slate-300 font-mono text-sm"
+        rows={8}
+      />
+    </div>
+  );
+};
+
+export default XmlFormatter;

src/index.css

@@ -597,4 +597,19 @@ html {
   margin-top: 5px;
   padding: 5px;
   background-color: rgba(255, 255, 255, 0.2);
+}
+
+textarea, input {
+  background: #010201;
+  border: none;
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid #ffffff40 !important;
+  color: white;
+  padding-inline: 20px;
+  padding-top: 10px;
+  font-size: 18px;
+}
+textarea:focus, input:focus {
+  outline: none;
 }

src/pages/DevArea/DevTools.jsx

@@ -4,6 +4,7 @@ import MarkDownEditor from "../../components/DevAreaTools/MarkDownEditor";
 import JSONFormatter from "../../components/DevAreaTools/JSONFormatter";
 import JWTDecoder from "../../components/DevAreaTools/JwtDecoder";
 import URLEncoderDecoder from "../../components/DevAreaTools/URLEncoderDecoder";
+import XmlFormatter from "../../components/DevAreaTools/XmlFormatter";
 
 const DevTools = () => {
     const { tool } = useParams();
@@ -13,6 +14,7 @@ const DevTools = () => {
         jwtdecoder: <JWTDecoder />,
         "json-formatter": <JSONFormatter />,
         "url-encoder-decoder": <URLEncoderDecoder />,
+        "xml-formatter": <XmlFormatter />,
     }
 
 

src/pages/DevArea/index.jsx

@@ -34,7 +34,7 @@ const DevArea = () => {
         {
             name: "XML Formatter",
             link: "/devarea/xml-formatter",
-            isAvailable: false
+            isAvailable: true
         },
         {
             name: "YAML Formatter",