7f2dd5260f
- Complete React app with 7 developer tools - JSON Tool with visual structured editor - Serialize Tool with visual structured editor - URL, Base64, CSV/JSON, Beautifier, Diff tools - Responsive navigation with dropdown menu - Dark/light mode toggle - Mobile-responsive design with sticky header - All tools working with copy/paste functionality
1 line
34 KiB
JSON
1 line
34 KiB
JSON
{"ast":null,"code":"var _jsxFileName = \"/Users/dwindown/CascadeProjects/developer-tools/src/pages/CsvJsonTool.js\",\n _s = $RefreshSig$();\nimport React, { useState } from 'react';\nimport { RefreshCw, Upload } from 'lucide-react';\nimport ToolLayout from '../components/ToolLayout';\nimport CopyButton from '../components/CopyButton';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst CsvJsonTool = () => {\n _s();\n const [input, setInput] = useState('');\n const [output, setOutput] = useState('');\n const [mode, setMode] = useState('csv-to-json'); // 'csv-to-json' or 'json-to-csv'\n const [delimiter, setDelimiter] = useState(',');\n const [hasHeaders, setHasHeaders] = useState(true);\n const csvToJson = () => {\n try {\n const lines = input.trim().split('\\n');\n if (lines.length === 0) {\n setOutput('Error: No data to convert');\n return;\n }\n const headers = hasHeaders ? lines[0].split(delimiter).map(h => h.trim()) : null;\n const dataLines = hasHeaders ? lines.slice(1) : lines;\n const result = dataLines.map((line, index) => {\n const values = line.split(delimiter).map(v => v.trim());\n if (hasHeaders && headers) {\n const obj = {};\n headers.forEach((header, i) => {\n obj[header] = values[i] || '';\n });\n return obj;\n } else {\n return values;\n }\n });\n setOutput(JSON.stringify(result, null, 2));\n } catch (err) {\n setOutput(`Error: ${err.message}`);\n }\n };\n const jsonToCsv = () => {\n try {\n const data = JSON.parse(input);\n if (!Array.isArray(data)) {\n setOutput('Error: JSON must be an array of objects');\n return;\n }\n if (data.length === 0) {\n setOutput('Error: Empty array');\n return;\n }\n\n // Get headers from first object\n const headers = Object.keys(data[0]);\n let csv = '';\n\n // Add headers if enabled\n if (hasHeaders) {\n csv += headers.join(delimiter) + '\\n';\n }\n\n // Add data rows\n data.forEach(row => {\n const values = headers.map(header => {\n const value = row[header] || '';\n // Escape values containing delimiter or quotes\n if (typeof value === 'string' && (value.includes(delimiter) || value.includes('\"') || value.includes('\\n'))) {\n return `\"${value.replace(/\"/g, '\"\"')}\"`;\n }\n return value;\n });\n csv += values.join(delimiter) + '\\n';\n });\n setOutput(csv.trim());\n } catch (err) {\n setOutput(`Error: ${err.message}`);\n }\n };\n const handleProcess = () => {\n if (mode === 'csv-to-json') {\n csvToJson();\n } else {\n jsonToCsv();\n }\n };\n const handleFileUpload = event => {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = e => {\n setInput(e.target.result);\n };\n reader.readAsText(file);\n }\n };\n const clearAll = () => {\n setInput('');\n setOutput('');\n };\n const loadSample = () => {\n if (mode === 'csv-to-json') {\n setInput(`name,age,email,city\nJohn Doe,30,john@example.com,New York\nJane Smith,25,jane@example.com,Los Angeles\nBob Johnson,35,bob@example.com,Chicago`);\n } else {\n setInput(`[\n {\n \"name\": \"John Doe\",\n \"age\": 30,\n \"email\": \"john@example.com\",\n \"city\": \"New York\"\n },\n {\n \"name\": \"Jane Smith\",\n \"age\": 25,\n \"email\": \"jane@example.com\",\n \"city\": \"Los Angeles\"\n }\n]`);\n }\n };\n return /*#__PURE__*/_jsxDEV(ToolLayout, {\n title: \"CSV \\u2194 JSON Converter\",\n description: \"Convert between CSV and JSON formats with custom delimiters\",\n icon: RefreshCw,\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mb-6 w-fit\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n onClick: () => setMode('csv-to-json'),\n className: `px-4 py-2 rounded-md font-medium transition-colors ${mode === 'csv-to-json' ? 'bg-white dark:bg-gray-700 text-primary-600 shadow-sm' : 'text-gray-600 dark:text-gray-400'}`,\n children: \"CSV \\u2192 JSON\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 143,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n onClick: () => setMode('json-to-csv'),\n className: `px-4 py-2 rounded-md font-medium transition-colors ${mode === 'json-to-csv' ? 'bg-white dark:bg-gray-700 text-primary-600 shadow-sm' : 'text-gray-600 dark:text-gray-400'}`,\n children: \"JSON \\u2192 CSV\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 153,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 142,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex flex-wrap items-center gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center space-x-2\",\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n className: \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n children: \"Delimiter:\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 168,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"select\", {\n value: delimiter,\n onChange: e => setDelimiter(e.target.value),\n className: \"px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm\",\n children: [/*#__PURE__*/_jsxDEV(\"option\", {\n value: \",\",\n children: \"Comma (,)\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 176,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"option\", {\n value: \";\",\n children: \"Semicolon (;)\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 177,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"option\", {\n value: \"\\\\t\",\n children: \"Tab\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 178,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"option\", {\n value: \"|\",\n children: \"Pipe (|)\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 179,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 171,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 167,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex items-center space-x-2\",\n children: [/*#__PURE__*/_jsxDEV(\"input\", {\n type: \"checkbox\",\n id: \"hasHeaders\",\n checked: hasHeaders,\n onChange: e => setHasHeaders(e.target.checked),\n className: \"rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n htmlFor: \"hasHeaders\",\n className: \"text-sm font-medium text-gray-700 dark:text-gray-300\",\n children: \"First row contains headers\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 191,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 183,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 166,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"flex flex-wrap gap-3 mb-6\",\n children: [/*#__PURE__*/_jsxDEV(\"button\", {\n onClick: handleProcess,\n className: \"tool-button\",\n children: mode === 'csv-to-json' ? 'Convert to JSON' : 'Convert to CSV'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 199,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"label\", {\n className: \"tool-button-secondary cursor-pointer flex items-center space-x-2\",\n children: [/*#__PURE__*/_jsxDEV(Upload, {\n className: \"h-4 w-4\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 203,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"span\", {\n children: \"Upload File\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 204,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"input\", {\n type: \"file\",\n onChange: handleFileUpload,\n className: \"hidden\",\n accept: \".csv,.json,.txt\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 205,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 202,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n onClick: loadSample,\n className: \"tool-button-secondary\",\n children: \"Load Sample\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 212,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"button\", {\n onClick: clearAll,\n className: \"tool-button-secondary\",\n children: \"Clear All\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 215,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 198,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"grid grid-cols-1 lg:grid-cols-2 gap-6\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"space-y-2\",\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n className: \"block text-sm font-medium text-gray-700 dark:text-gray-300\",\n children: mode === 'csv-to-json' ? 'CSV Input' : 'JSON Input'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 224,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"relative\",\n children: /*#__PURE__*/_jsxDEV(\"textarea\", {\n value: input,\n onChange: e => setInput(e.target.value),\n placeholder: mode === 'csv-to-json' ? 'Paste your CSV data here...' : 'Paste your JSON array here...',\n className: \"tool-input h-96\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 228,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 227,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 223,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"space-y-2\",\n children: [/*#__PURE__*/_jsxDEV(\"label\", {\n className: \"block text-sm font-medium text-gray-700 dark:text-gray-300\",\n children: mode === 'csv-to-json' ? 'JSON Output' : 'CSV Output'\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 243,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"relative\",\n children: [/*#__PURE__*/_jsxDEV(\"textarea\", {\n value: output,\n readOnly: true,\n placeholder: mode === 'csv-to-json' ? 'JSON output will appear here...' : 'CSV output will appear here...',\n className: \"tool-input h-96 bg-gray-50 dark:bg-gray-800\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 247,\n columnNumber: 13\n }, this), output && /*#__PURE__*/_jsxDEV(CopyButton, {\n text: output\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 257,\n columnNumber: 24\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 246,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 242,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 221,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-4 mt-6\",\n children: [/*#__PURE__*/_jsxDEV(\"h4\", {\n className: \"text-blue-800 dark:text-blue-200 font-medium mb-2\",\n children: \"Usage Tips\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 264,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"ul\", {\n className: \"text-blue-700 dark:text-blue-300 text-sm space-y-1\",\n children: [/*#__PURE__*/_jsxDEV(\"li\", {\n children: \"\\u2022 CSV to JSON converts each row to an object with column headers as keys\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 266,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"\\u2022 JSON to CSV requires an array of objects with consistent properties\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 267,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"\\u2022 Choose the appropriate delimiter for your CSV format\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 268,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n children: \"\\u2022 Toggle \\\"First row contains headers\\\" based on your data structure\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 269,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 265,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 263,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 136,\n columnNumber: 5\n }, this);\n};\n_s(CsvJsonTool, \"EUCJ+M+lX3oyo0baUf35v4kFlAQ=\");\n_c = CsvJsonTool;\nexport default CsvJsonTool;\nvar _c;\n$RefreshReg$(_c, \"CsvJsonTool\");","map":{"version":3,"names":["React","useState","RefreshCw","Upload","ToolLayout","CopyButton","jsxDEV","_jsxDEV","CsvJsonTool","_s","input","setInput","output","setOutput","mode","setMode","delimiter","setDelimiter","hasHeaders","setHasHeaders","csvToJson","lines","trim","split","length","headers","map","h","dataLines","slice","result","line","index","values","v","obj","forEach","header","i","JSON","stringify","err","message","jsonToCsv","data","parse","Array","isArray","Object","keys","csv","join","row","value","includes","replace","handleProcess","handleFileUpload","event","file","target","files","reader","FileReader","onload","e","readAsText","clearAll","loadSample","title","description","icon","children","className","onClick","fileName","_jsxFileName","lineNumber","columnNumber","onChange","type","id","checked","htmlFor","accept","placeholder","readOnly","text","_c","$RefreshReg$"],"sources":["/Users/dwindown/CascadeProjects/developer-tools/src/pages/CsvJsonTool.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { RefreshCw, Upload } from 'lucide-react';\nimport ToolLayout from '../components/ToolLayout';\nimport CopyButton from '../components/CopyButton';\n\nconst CsvJsonTool = () => {\n const [input, setInput] = useState('');\n const [output, setOutput] = useState('');\n const [mode, setMode] = useState('csv-to-json'); // 'csv-to-json' or 'json-to-csv'\n const [delimiter, setDelimiter] = useState(',');\n const [hasHeaders, setHasHeaders] = useState(true);\n\n const csvToJson = () => {\n try {\n const lines = input.trim().split('\\n');\n if (lines.length === 0) {\n setOutput('Error: No data to convert');\n return;\n }\n\n const headers = hasHeaders ? lines[0].split(delimiter).map(h => h.trim()) : null;\n const dataLines = hasHeaders ? lines.slice(1) : lines;\n \n const result = dataLines.map((line, index) => {\n const values = line.split(delimiter).map(v => v.trim());\n \n if (hasHeaders && headers) {\n const obj = {};\n headers.forEach((header, i) => {\n obj[header] = values[i] || '';\n });\n return obj;\n } else {\n return values;\n }\n });\n\n setOutput(JSON.stringify(result, null, 2));\n } catch (err) {\n setOutput(`Error: ${err.message}`);\n }\n };\n\n const jsonToCsv = () => {\n try {\n const data = JSON.parse(input);\n \n if (!Array.isArray(data)) {\n setOutput('Error: JSON must be an array of objects');\n return;\n }\n\n if (data.length === 0) {\n setOutput('Error: Empty array');\n return;\n }\n\n // Get headers from first object\n const headers = Object.keys(data[0]);\n \n let csv = '';\n \n // Add headers if enabled\n if (hasHeaders) {\n csv += headers.join(delimiter) + '\\n';\n }\n \n // Add data rows\n data.forEach(row => {\n const values = headers.map(header => {\n const value = row[header] || '';\n // Escape values containing delimiter or quotes\n if (typeof value === 'string' && (value.includes(delimiter) || value.includes('\"') || value.includes('\\n'))) {\n return `\"${value.replace(/\"/g, '\"\"')}\"`;\n }\n return value;\n });\n csv += values.join(delimiter) + '\\n';\n });\n\n setOutput(csv.trim());\n } catch (err) {\n setOutput(`Error: ${err.message}`);\n }\n };\n\n const handleProcess = () => {\n if (mode === 'csv-to-json') {\n csvToJson();\n } else {\n jsonToCsv();\n }\n };\n\n const handleFileUpload = (event) => {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (e) => {\n setInput(e.target.result);\n };\n reader.readAsText(file);\n }\n };\n\n const clearAll = () => {\n setInput('');\n setOutput('');\n };\n\n const loadSample = () => {\n if (mode === 'csv-to-json') {\n setInput(`name,age,email,city\nJohn Doe,30,john@example.com,New York\nJane Smith,25,jane@example.com,Los Angeles\nBob Johnson,35,bob@example.com,Chicago`);\n } else {\n setInput(`[\n {\n \"name\": \"John Doe\",\n \"age\": 30,\n \"email\": \"john@example.com\",\n \"city\": \"New York\"\n },\n {\n \"name\": \"Jane Smith\",\n \"age\": 25,\n \"email\": \"jane@example.com\",\n \"city\": \"Los Angeles\"\n }\n]`);\n }\n };\n\n return (\n <ToolLayout\n title=\"CSV ↔ JSON Converter\"\n description=\"Convert between CSV and JSON formats with custom delimiters\"\n icon={RefreshCw}\n >\n {/* Mode Toggle */}\n <div className=\"flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1 mb-6 w-fit\">\n <button\n onClick={() => setMode('csv-to-json')}\n className={`px-4 py-2 rounded-md font-medium transition-colors ${\n mode === 'csv-to-json'\n ? 'bg-white dark:bg-gray-700 text-primary-600 shadow-sm'\n : 'text-gray-600 dark:text-gray-400'\n }`}\n >\n CSV → JSON\n </button>\n <button\n onClick={() => setMode('json-to-csv')}\n className={`px-4 py-2 rounded-md font-medium transition-colors ${\n mode === 'json-to-csv'\n ? 'bg-white dark:bg-gray-700 text-primary-600 shadow-sm'\n : 'text-gray-600 dark:text-gray-400'\n }`}\n >\n JSON → CSV\n </button>\n </div>\n\n {/* Options */}\n <div className=\"flex flex-wrap items-center gap-4 mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg\">\n <div className=\"flex items-center space-x-2\">\n <label className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n Delimiter:\n </label>\n <select\n value={delimiter}\n onChange={(e) => setDelimiter(e.target.value)}\n className=\"px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm\"\n >\n <option value=\",\">Comma (,)</option>\n <option value=\";\">Semicolon (;)</option>\n <option value=\"\\t\">Tab</option>\n <option value=\"|\">Pipe (|)</option>\n </select>\n </div>\n \n <div className=\"flex items-center space-x-2\">\n <input\n type=\"checkbox\"\n id=\"hasHeaders\"\n checked={hasHeaders}\n onChange={(e) => setHasHeaders(e.target.checked)}\n className=\"rounded border-gray-300 text-primary-600 focus:ring-primary-500\"\n />\n <label htmlFor=\"hasHeaders\" className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n First row contains headers\n </label>\n </div>\n </div>\n\n {/* Controls */}\n <div className=\"flex flex-wrap gap-3 mb-6\">\n <button onClick={handleProcess} className=\"tool-button\">\n {mode === 'csv-to-json' ? 'Convert to JSON' : 'Convert to CSV'}\n </button>\n <label className=\"tool-button-secondary cursor-pointer flex items-center space-x-2\">\n <Upload className=\"h-4 w-4\" />\n <span>Upload File</span>\n <input\n type=\"file\"\n onChange={handleFileUpload}\n className=\"hidden\"\n accept=\".csv,.json,.txt\"\n />\n </label>\n <button onClick={loadSample} className=\"tool-button-secondary\">\n Load Sample\n </button>\n <button onClick={clearAll} className=\"tool-button-secondary\">\n Clear All\n </button>\n </div>\n\n {/* Input/Output Grid */}\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/* Input */}\n <div className=\"space-y-2\">\n <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\n {mode === 'csv-to-json' ? 'CSV Input' : 'JSON Input'}\n </label>\n <div className=\"relative\">\n <textarea\n value={input}\n onChange={(e) => setInput(e.target.value)}\n placeholder={\n mode === 'csv-to-json' \n ? 'Paste your CSV data here...' \n : 'Paste your JSON array here...'\n }\n className=\"tool-input h-96\"\n />\n </div>\n </div>\n\n {/* Output */}\n <div className=\"space-y-2\">\n <label className=\"block text-sm font-medium text-gray-700 dark:text-gray-300\">\n {mode === 'csv-to-json' ? 'JSON Output' : 'CSV Output'}\n </label>\n <div className=\"relative\">\n <textarea\n value={output}\n readOnly\n placeholder={\n mode === 'csv-to-json' \n ? 'JSON output will appear here...' \n : 'CSV output will appear here...'\n }\n className=\"tool-input h-96 bg-gray-50 dark:bg-gray-800\"\n />\n {output && <CopyButton text={output} />}\n </div>\n </div>\n </div>\n\n {/* Usage Tips */}\n <div className=\"bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md p-4 mt-6\">\n <h4 className=\"text-blue-800 dark:text-blue-200 font-medium mb-2\">Usage Tips</h4>\n <ul className=\"text-blue-700 dark:text-blue-300 text-sm space-y-1\">\n <li>• CSV to JSON converts each row to an object with column headers as keys</li>\n <li>• JSON to CSV requires an array of objects with consistent properties</li>\n <li>• Choose the appropriate delimiter for your CSV format</li>\n <li>• Toggle \"First row contains headers\" based on your data structure</li>\n </ul>\n </div>\n </ToolLayout>\n );\n};\n\nexport default CsvJsonTool;\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |