demoo / assets /JsonTreeNavigator-BT2AXqig.js
admin08077's picture
Upload 85 files
edfe4af verified
import{r as i,j as e}from"./react-D_B_5QVd.js";import{F as u}from"./index-QBya0NjG.js";import"./jszip-C9ownNzX.js";import"./react-dom-EAO2-NBm.js";import"./scheduler-DYLXRpC5.js";import"./@google-4tyssLU_.js";import"./idb-Dob3nYDb.js";const m=({data:s,nodeKey:l,isRoot:a=!1})=>{const[r,o]=i.useState(a),n=typeof s=="object"&&s!==null,c=()=>o(!r);if(!n)return e.jsxs("div",{className:"ml-4 pl-4 border-l border-slate-700",children:[e.jsxs("span",{className:"text-purple-400",children:[l,": "]}),e.jsx("span",{className:typeof s=="string"?"text-green-400":"text-orange-400",children:typeof s=="string"?`"${s}"`:String(s)})]});const d=Object.entries(s),t=Array.isArray(s)?"[]":"{}";return e.jsxs("div",{className:`ml-4 ${a?"":"pl-4 border-l border-slate-700"}`,children:[e.jsxs("button",{onClick:c,className:"flex items-center cursor-pointer",children:[e.jsx("span",{className:`transform transition-transform ${r?"rotate-90":"rotate-0"}`,children:"▶"}),e.jsxs("span",{className:"ml-1 text-purple-400",children:[l,":"]}),e.jsx("span",{className:"ml-2 text-slate-500",children:t[0]}),!r&&e.jsxs("span",{className:"text-slate-500",children:["...",t[1]]})]}),r&&e.jsxs("div",{children:[d.map(([x,p])=>e.jsx(m,{nodeKey:x,data:p},x)),e.jsx("div",{className:"text-slate-500 ml-4",children:t[1]})]})]})},f=({data:s})=>{const[l,a]=i.useState(`{
"id": "devcore-001",
"active": true,
"features": [
"ai-explainer",
"api-tester"
],
"config": {
"theme": "dark",
"version": 1
}
}`),[r,o]=i.useState(null),[n,c]=i.useState(""),d=()=>{try{const t=JSON.parse(l);o(t),c("")}catch(t){t instanceof Error&&c(t.message),o(null)}};return s?e.jsx("div",{className:"font-mono text-sm",children:e.jsx(m,{data:s,nodeKey:"root",isRoot:!0})}):e.jsxs("div",{className:"h-full flex flex-col p-4 sm:p-6 lg:p-8",children:[e.jsxs("header",{className:"mb-6",children:[e.jsxs("h1",{className:"text-3xl font-bold text-slate-100 flex items-center",children:[e.jsx(u,{}),e.jsx("span",{className:"ml-3",children:"JSON Tree Navigator"})]}),e.jsx("p",{className:"text-slate-400 mt-1",children:"Paste your JSON data to visualize it as a collapsible tree."})]}),e.jsxs("div",{className:"flex-grow grid grid-cols-1 lg:grid-cols-2 gap-6 h-full overflow-hidden",children:[e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsx("label",{htmlFor:"json-input",className:"text-sm font-medium text-slate-400 mb-2",children:"JSON Input"}),e.jsx("textarea",{id:"json-input",value:l,onChange:t=>a(t.target.value),className:`flex-grow p-4 bg-slate-900 border ${n?"border-red-500":"border-slate-700"} rounded-md resize-none font-mono text-sm text-cyan-300 focus:ring-2 focus:ring-cyan-500 focus:outline-none`}),n&&e.jsx("p",{className:"text-red-400 text-xs mt-1",children:n}),e.jsx("button",{onClick:d,className:"mt-4 w-full px-6 py-3 bg-cyan-500 text-slate-900 font-bold rounded-md hover:bg-cyan-400",children:"Render Tree"})]}),e.jsxs("div",{className:"flex flex-col h-full",children:[e.jsx("label",{className:"text-sm font-medium text-slate-400 mb-2",children:"Tree View"}),e.jsx("div",{className:"flex-grow p-4 bg-slate-800/50 border border-slate-700/50 rounded-md overflow-y-auto",children:r?e.jsx(f,{data:r}):e.jsx("div",{className:"text-slate-500",children:'Click "Render Tree" to view'})})]})]})]})};export{f as JsonTreeNavigator};
//# sourceMappingURL=JsonTreeNavigator-BT2AXqig.js.map