admin08077/Githubgemini

1{"version":3,"file":"JsonTreeNavigator-jL-uMAm6.js","sources":["../../components/features/JsonTreeNavigator.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { FileCodeIcon } from '../icons.tsx';\n\ninterface JsonNodeProps {\n    data: any;\n    nodeKey: string;\n    isRoot?: boolean;\n}\n\nconst JsonNode: React.FC<JsonNodeProps> = ({ data, nodeKey, isRoot = false }) => {\n    const [isOpen, setIsOpen] = useState(isRoot);\n    const isObject = typeof data === 'object' && data !== null;\n\n    const toggleOpen = () => setIsOpen(!isOpen);\n\n    if (!isObject) {\n        return (\n            <div className=\"ml-4 pl-4 border-l border-border\">\n                <span className=\"text-purple-700\">{nodeKey}: </span>\n                <span className={typeof data === 'string' ? 'text-green-700' : 'text-orange-700'}>\n                    {typeof data === 'string' ? `\"${data}\"` : String(data)}\n                </span>\n            </div>\n        );\n    }\n\n    const entries = Object.entries(data);\n    const bracket = Array.isArray(data) ? '[]' : '{}';\n\n    return (\n        <div className={`ml-4 ${!isRoot ? 'pl-4 border-l border-border' : ''}`}>\n            <button onClick={toggleOpen} className=\"flex items-center cursor-pointer hover:bg-gray-100 rounded px-1\">\n                <span className={`transform transition-transform ${isOpen ? 'rotate-90' : 'rotate-0'}`}>▶</span>\n                <span className=\"ml-1 text-purple-700\">{nodeKey}:</span>\n                <span className=\"ml-2 text-text-secondary\">{bracket[0]}</span>\n                {!isOpen && <span className=\"text-text-secondary\">...{bracket[1]}</span>}\n            </button>\n            {isOpen && (\n                <div>\n                    {entries.map(([key, value]) => (\n                        <JsonNode key={key} nodeKey={key} data={value} />\n                    ))}\n                    <div className=\"text-text-secondary ml-4\">{bracket[1]}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const JsonTreeNavigator: React.FC<{ initialData?: object }> = ({ initialData }) => {\n    const defaultJson = '{\\n  \"id\": \"devcore-001\",\\n  \"active\": true,\\n  \"features\": [\\n    \"ai-explainer\",\\n    \"api-tester\"\\n  ],\\n  \"config\": {\\n    \"theme\": \"dark\",\\n    \"version\": 1\\n  }\\n}';\n    const [jsonInput, setJsonInput] = useState(initialData ? JSON.stringify(initialData, null, 2) : defaultJson);\n    const [parsedData, setParsedData] = useState<any>(() => {\n        try {\n            return JSON.parse(jsonInput);\n        } catch {\n            return null;\n        }\n    });\n    const [error, setError] = useState('');\n\n    const parseJson = (input: string) => {\n        try {\n            const parsed = JSON.parse(input);\n            setParsedData(parsed);\n            setError('');\n        } catch (e) {\n            if (e instanceof Error) setError(e.message);\n            setParsedData(null);\n        }\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n        setJsonInput(e.target.value);\n        parseJson(e.target.value);\n    }\n    \n    return (\n        <div className=\"h-full flex flex-col p-4 sm:p-6 lg:p-8 text-text-primary\">\n            <header className=\"mb-6\">\n                <h1 className=\"text-3xl font-bold flex items-center\">\n                    <FileCodeIcon />\n                    <span className=\"ml-3\">JSON Tree Navigator</span>\n                </h1>\n                <p className=\"text-text-secondary mt-1\">Paste your JSON data to visualize it as a collapsible tree.</p>\n            </header>\n            <div className=\"flex-grow flex flex-col gap-4 min-h-0\">\n                <div className=\"flex flex-col h-2/5 min-h-[200px]\">\n                    <label htmlFor=\"json-input\" className=\"text-sm font-medium text-text-secondary mb-2\">JSON Input</label>\n                    <textarea\n                        id=\"json-input\"\n                        value={jsonInput}\n                        onChange={handleInputChange}\n                        className={`flex-grow p-4 bg-surface border ${error ? 'border-red-500' : 'border-border'} rounded-md resize-y font-mono text-sm focus:ring-2 focus:ring-primary focus:outline-none`}\n                    />\n                    {error && <p className=\"text-red-500 text-xs mt-1\">{error}</p>}\n                </div>\n                 <div className=\"flex flex-col flex-grow min-h-0\">\n                    <label className=\"text-sm font-medium text-text-secondary mb-2\">Tree View</label>\n                    <div className=\"flex-grow p-4 bg-surface border border-border rounded-md overflow-y-auto font-mono text-sm\">\n                        {parsedData ? <JsonNode data={parsedData} nodeKey=\"root\" isRoot /> : <div className=\"text-text-secondary\">Enter valid JSON to view</div>}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"],"names":["JsonNode","data","nodeKey","isRoot","isOpen","setIsOpen","useState","isObject","toggleOpen","jsxs","entries","bracket","jsx","key","value","JsonTreeNavigator","initialData","defaultJson","jsonInput","setJsonInput","parsedData","setParsedData","error","setError","parseJson","input","parsed","e","handleInputChange","FileCodeIcon"],"mappings":"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"}