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
5.3 KiB
JSON
1 line
5.3 KiB
JSON
{"ast":null,"code":"var _jsxFileName = \"/Users/dwindown/CascadeProjects/developer-tools/src/components/ThemeToggle.js\",\n _s = $RefreshSig$();\nimport React, { useState, useEffect } from 'react';\nimport { Sun, Moon } from 'lucide-react';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst ThemeToggle = () => {\n _s();\n const [isDark, setIsDark] = useState(false);\n useEffect(() => {\n // Check system preference on mount\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n setIsDark(mediaQuery.matches);\n\n // Listen for system theme changes\n const handleChange = e => {\n setIsDark(e.matches);\n };\n mediaQuery.addEventListener('change', handleChange);\n return () => mediaQuery.removeEventListener('change', handleChange);\n }, []);\n useEffect(() => {\n // Apply theme to document\n if (isDark) {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n }, [isDark]);\n const toggleTheme = () => {\n setIsDark(!isDark);\n };\n return /*#__PURE__*/_jsxDEV(\"button\", {\n onClick: toggleTheme,\n className: \"p-2 rounded-md text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200\",\n title: isDark ? 'Switch to light mode' : 'Switch to dark mode',\n children: isDark ? /*#__PURE__*/_jsxDEV(Sun, {\n className: \"h-5 w-5\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 41,\n columnNumber: 9\n }, this) : /*#__PURE__*/_jsxDEV(Moon, {\n className: \"h-5 w-5\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 43,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 35,\n columnNumber: 5\n }, this);\n};\n_s(ThemeToggle, \"MY+3NvjXsBPnKBBvoV1wuj6EAdg=\");\n_c = ThemeToggle;\nexport default ThemeToggle;\nvar _c;\n$RefreshReg$(_c, \"ThemeToggle\");","map":{"version":3,"names":["React","useState","useEffect","Sun","Moon","jsxDEV","_jsxDEV","ThemeToggle","_s","isDark","setIsDark","mediaQuery","window","matchMedia","matches","handleChange","e","addEventListener","removeEventListener","document","documentElement","classList","add","remove","toggleTheme","onClick","className","title","children","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["/Users/dwindown/CascadeProjects/developer-tools/src/components/ThemeToggle.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { Sun, Moon } from 'lucide-react';\n\nconst ThemeToggle = () => {\n const [isDark, setIsDark] = useState(false);\n\n useEffect(() => {\n // Check system preference on mount\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n setIsDark(mediaQuery.matches);\n\n // Listen for system theme changes\n const handleChange = (e) => {\n setIsDark(e.matches);\n };\n\n mediaQuery.addEventListener('change', handleChange);\n return () => mediaQuery.removeEventListener('change', handleChange);\n }, []);\n\n useEffect(() => {\n // Apply theme to document\n if (isDark) {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n }, [isDark]);\n\n const toggleTheme = () => {\n setIsDark(!isDark);\n };\n\n return (\n <button\n onClick={toggleTheme}\n className=\"p-2 rounded-md text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200\"\n title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}\n >\n {isDark ? (\n <Sun className=\"h-5 w-5\" />\n ) : (\n <Moon className=\"h-5 w-5\" />\n )}\n </button>\n );\n};\n\nexport default ThemeToggle;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,SAASC,GAAG,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,MAAA,IAAAC,OAAA;AAEzC,MAAMC,WAAW,GAAGA,CAAA,KAAM;EAAAC,EAAA;EACxB,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGT,QAAQ,CAAC,KAAK,CAAC;EAE3CC,SAAS,CAAC,MAAM;IACd;IACA,MAAMS,UAAU,GAAGC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;IACpEH,SAAS,CAACC,UAAU,CAACG,OAAO,CAAC;;IAE7B;IACA,MAAMC,YAAY,GAAIC,CAAC,IAAK;MAC1BN,SAAS,CAACM,CAAC,CAACF,OAAO,CAAC;IACtB,CAAC;IAEDH,UAAU,CAACM,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IACnD,OAAO,MAAMJ,UAAU,CAACO,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;EACrE,CAAC,EAAE,EAAE,CAAC;EAENb,SAAS,CAAC,MAAM;IACd;IACA,IAAIO,MAAM,EAAE;MACVU,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,GAAG,CAAC,MAAM,CAAC;IAChD,CAAC,MAAM;MACLH,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACE,MAAM,CAAC,MAAM,CAAC;IACnD;EACF,CAAC,EAAE,CAACd,MAAM,CAAC,CAAC;EAEZ,MAAMe,WAAW,GAAGA,CAAA,KAAM;IACxBd,SAAS,CAAC,CAACD,MAAM,CAAC;EACpB,CAAC;EAED,oBACEH,OAAA;IACEmB,OAAO,EAAED,WAAY;IACrBE,SAAS,EAAC,mKAAmK;IAC7KC,KAAK,EAAElB,MAAM,GAAG,sBAAsB,GAAG,qBAAsB;IAAAmB,QAAA,EAE9DnB,MAAM,gBACLH,OAAA,CAACH,GAAG;MAACuB,SAAS,EAAC;IAAS;MAAAG,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OAAE,CAAC,gBAE3B1B,OAAA,CAACF,IAAI;MAACsB,SAAS,EAAC;IAAS;MAAAG,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OAAE;EAC5B;IAAAH,QAAA,EAAAC,YAAA;IAAAC,UAAA;IAAAC,YAAA;EAAA,OACK,CAAC;AAEb,CAAC;AAACxB,EAAA,CA3CID,WAAW;AAAA0B,EAAA,GAAX1B,WAAW;AA6CjB,eAAeA,WAAW;AAAC,IAAA0B,EAAA;AAAAC,YAAA,CAAAD,EAAA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |