function MainComponent() { const [jsonInput, setJsonInput] = React.useState(''); const [tsInterfaces, setTsInterfaces] = React.useState(''); const handleJsonInputChange = (event)=>{ setJsonInput(event.target.value); generateTsInterfaces(event.target.value); }; const generateTsInterfaces = (json)=>{ try { const jsonObject = JSON.parse(json); const tsInterfacesResult = jsonToTSInterfaces(jsonObject); setTsInterfaces(tsInterfacesResult); } catch (error) { setTsInterfaces('// Invalid JSON'); } }; const jsonToTSInterfaces = (jsonObject, parentKey = '', level = 0)=>{ let interfacesString = ''; const indent = ' '.repeat(level * 2); const interfaceName = parentKey ? `I${parentKey.charAt(0).toUpperCase() + parentKey.slice(1)}` : 'IJson'; interfacesString += `${indent}interface ${interfaceName} {\n`; for(const key in jsonObject){ if (typeof jsonObject[key] === 'object' && jsonObject[key] !== null) { const childInterfaceName = `I${key.charAt(0).toUpperCase() + key.slice(1)}`; interfacesString += `${indent} ${key}: ${childInterfaceName};\n`; interfacesString += jsonToTSInterfaces(jsonObject[key], key, level + 1); } else { interfacesString += `${indent} ${key}: ${typeof jsonObject[key]};\n`; } } interfacesString += `${indent}}\n\n`; return interfacesString; }; const applySyntaxHighlight = (code)=>{ return code.replace(/(interface\sI[A-Za-z]+)/g, '$1').replace(/(\/\/ Invalid JSON)/g, '$1').replace(/(true|false|null|undefined)/g, '$1').replace(/(".*?")/g, '$1').replace(/(:\s*)([A-Za-z]+)/g, '$1$2'); }; const highlightedTsInterfaces = React.useMemo(()=>applySyntaxHighlight(tsInterfaces), [ tsInterfaces ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FAFAFA] flex items-center justify-center", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-4 md:space-y-0 md:space-x-4 md:flex md:items-start", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-xl rounded-lg p-4 w-full md:w-full lg:w-[600px]", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#333] mb-3", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "JSON"), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-xl rounded-lg p-4 w-full md:w-full lg:w-[600px] mt-4 md:mt-0", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#333] mb-3", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "TypeScript Interfaces"), /*#__PURE__*/ React.createElement(React.Fragment, null)))); }