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