{"ast":null,"code":"var _jsxFileName = \"/home/magh/Documents/landing_page_experimental/src/App.jsx\",\n _s = $RefreshSig$();\nimport React, { useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport './App.css';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nfunction App() {\n _s();\n // Primary category: single selection (default “science”)\n const [primaryCategory, setPrimaryCategory] = useState('science');\n // Additional categories: multiple selection (initially empty)\n const [additionalCategories, setAdditionalCategories] = useState([]);\n // Controls whether the primary dropdown is open\n const [primaryDropdownOpen, setPrimaryDropdownOpen] = useState(false);\n // The search query state\n const [query, setQuery] = useState('');\n const navigate = useNavigate();\n\n // Existing maps for images, header, backgrounds, etc.\n const imageMap = {\n science: '/main.png',\n philosophy: '/philosophy.png',\n tech: '/tech.png',\n discover: '/web.png',\n multi: '/multi.png'\n };\n const headerMap = {\n science: '/header.png',\n philosophy: '/header_philosophy.png',\n tech: '/header_tech.png',\n discover: '/header_web.png',\n multi: '/header_multi.png'\n };\n const appBgMap = {\n science: '#fcfcff',\n philosophy: '#ffffff',\n tech: '#ffffff',\n discover: '#ffffff',\n multi: '#f0f0f0'\n };\n const headerBgMap = {\n science: '#f8f8f8',\n philosophy: '#ffffff',\n tech: '#ffffff',\n discover: '#ffffff',\n multi: '#cccccc'\n };\n\n // Mapping keys to display names\n const displayNames = {\n science: \"The Universe of Science\",\n philosophy: \"Philosophy and Logic\",\n tech: \"Computers and Technology\",\n discover: \"Discover the Web\"\n };\n\n // Available category keys\n const allCategories = [\"science\", \"philosophy\", \"tech\", \"discover\"];\n\n // For the header we now use \"multi\" resources when any additional category is selected.\n const currentCategory = additionalCategories.length > 0 ? \"multi\" : primaryCategory;\n\n // Options for the additional categories dropdown: exclude the primary category.\n const additionalOptions = allCategories.filter(cat => cat !== primaryCategory);\n\n // Sort additional options: selected options (in the order they were picked) appear first; then the rest sorted alphabetically.\n additionalOptions.sort((a, b) => {\n const aSelected = additionalCategories.includes(a);\n const bSelected = additionalCategories.includes(b);\n if (aSelected && !bSelected) return -1;\n if (!aSelected && bSelected) return 1;\n if (aSelected && bSelected) {\n return additionalCategories.indexOf(a) - additionalCategories.indexOf(b);\n }\n return a.localeCompare(b);\n });\n\n // When the form is submitted, build a comma‑separated list using\n // the primary category first and then any additional ones.\n const handleSubmit = e => {\n e.preventDefault();\n const catParam = primaryCategory + (additionalCategories.length > 0 ? ',' + additionalCategories.join(',') : '');\n navigate(`/results?q=${encodeURIComponent(query)}&cat=${catParam}`);\n };\n\n // In the primary dropdown, when a user clicks an option,\n // update the primary category, remove it from additional (if needed),\n // and retract the dropdown.\n const handlePrimaryCategorySelect = cat => {\n setPrimaryCategory(cat);\n setAdditionalCategories(prev => prev.filter(c => c !== cat));\n setPrimaryDropdownOpen(false);\n };\n\n // For the additional dropdown, toggle a category on or off.\n const handleAdditionalToggle = cat => {\n setAdditionalCategories(prev => {\n if (prev.includes(cat)) {\n return prev.filter(c => c !== cat);\n } else {\n return [...prev, cat];\n }\n });\n };\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"App\",\n style: {\n backgroundColor: appBgMap[currentCategory]\n },\n children: [/*#__PURE__*/_jsxDEV(\"header\", {\n className: \"header-bar\",\n style: {\n backgroundColor: headerBgMap[currentCategory]\n },\n children: /*#__PURE__*/_jsxDEV(\"img\", {\n src: headerMap[currentCategory],\n alt: \"Header\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 113,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 112,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"main\", {\n className: \"main-content\",\n children: [/*#__PURE__*/_jsxDEV(\"img\", {\n id: \"mascot-img\",\n src: imageMap[currentCategory],\n alt: \"Mascot\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 116,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n id: \"tagline\",\n children: \"a search engine for the rest of us\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 117,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"form\", {\n className: \"search-form\",\n onSubmit: handleSubmit,\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"search-container\",\n children: /*#__PURE__*/_jsxDEV(\"input\", {\n type: \"text\",\n name: \"search\",\n placeholder: \"Search...\",\n value: query,\n onChange: e => setQuery(e.target.value)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 120,\n columnNumber: 13\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 119,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: `custom-dropdown primary-dropdown ${primaryDropdownOpen ? 'open' : ''}`,\n onClick: () => setPrimaryDropdownOpen(!primaryDropdownOpen),\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"dropdown-selected\",\n children: displayNames[primaryCategory]\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 134,\n columnNumber: 13\n }, this), primaryDropdownOpen && /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"dropdown-items\",\n children: allCategories.map(cat => /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"dropdown-item\",\n onClick: e => {\n e.stopPropagation();\n handlePrimaryCategorySelect(cat);\n },\n children: displayNames[cat]\n }, cat, false, {\n fileName: _jsxFileName,\n lineNumber: 140,\n columnNumber: 19\n }, this))\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 138,\n columnNumber: 15\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 130,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"custom-dropdown additional-dropdown\",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"dropdown-selected\",\n children: additionalCategories.length === 0 ? \"Select additional categories\" : additionalCategories.map(cat => displayNames[cat]).join(\", \")\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 157,\n columnNumber: 13\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"dropdown-items\",\n children: additionalOptions.map(cat => {\n const isSelected = additionalCategories.includes(cat);\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: `dropdown-item ${isSelected ? 'dropdown-item-selected' : ''}`,\n onClick: e => {\n e.stopPropagation();\n handleAdditionalToggle(cat);\n },\n children: displayNames[cat]\n }, cat, false, {\n fileName: _jsxFileName,\n lineNumber: 166,\n columnNumber: 19\n }, this);\n })\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 162,\n columnNumber: 13\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 156,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 118,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 115,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"footer\", {\n className: \"footer\",\n children: [/*#__PURE__*/_jsxDEV(\"a\", {\n href: \"https://git.tsugutsugugo.com/explore/repos\",\n children: \"Source\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 183,\n columnNumber: 9\n }, this), \" |\", ' ', /*#__PURE__*/_jsxDEV(\"a\", {\n href: \"https://docs.tsugutsugugo.com/\",\n children: \"Docs\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 184,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 182,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 111,\n columnNumber: 5\n }, this);\n}\n_s(App, \"TJwiyhLjgtevSXdUvCBUBTaGy1E=\", false, function () {\n return [useNavigate];\n});\n_c = App;\nexport default App;\nvar _c;\n$RefreshReg$(_c, \"App\");","map":{"version":3,"names":["React","useState","useNavigate","jsxDEV","_jsxDEV","App","_s","primaryCategory","setPrimaryCategory","additionalCategories","setAdditionalCategories","primaryDropdownOpen","setPrimaryDropdownOpen","query","setQuery","navigate","imageMap","science","philosophy","tech","discover","multi","headerMap","appBgMap","headerBgMap","displayNames","allCategories","currentCategory","length","additionalOptions","filter","cat","sort","a","b","aSelected","includes","bSelected","indexOf","localeCompare","handleSubmit","e","preventDefault","catParam","join","encodeURIComponent","handlePrimaryCategorySelect","prev","c","handleAdditionalToggle","className","style","backgroundColor","children","src","alt","fileName","_jsxFileName","lineNumber","columnNumber","id","onSubmit","type","name","placeholder","value","onChange","target","onClick","map","stopPropagation","isSelected","href","_c","$RefreshReg$"],"sources":["/home/magh/Documents/landing_page_experimental/src/App.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport './App.css';\n\nfunction App() {\n // Primary category: single selection (default “science”)\n const [primaryCategory, setPrimaryCategory] = useState('science');\n // Additional categories: multiple selection (initially empty)\n const [additionalCategories, setAdditionalCategories] = useState([]);\n // Controls whether the primary dropdown is open\n const [primaryDropdownOpen, setPrimaryDropdownOpen] = useState(false);\n // The search query state\n const [query, setQuery] = useState('');\n\n const navigate = useNavigate();\n\n // Existing maps for images, header, backgrounds, etc.\n const imageMap = {\n science: '/main.png',\n philosophy: '/philosophy.png',\n tech: '/tech.png',\n discover: '/web.png',\n multi: '/multi.png'\n };\n\n const headerMap = {\n science: '/header.png',\n philosophy: '/header_philosophy.png',\n tech: '/header_tech.png',\n discover: '/header_web.png',\n multi: '/header_multi.png'\n };\n\n const appBgMap = {\n science: '#fcfcff',\n philosophy: '#ffffff',\n tech: '#ffffff',\n discover: '#ffffff',\n multi: '#f0f0f0'\n };\n\n const headerBgMap = {\n science: '#f8f8f8',\n philosophy: '#ffffff',\n tech: '#ffffff',\n discover: '#ffffff',\n multi: '#cccccc'\n };\n\n // Mapping keys to display names\n const displayNames = {\n science: \"The Universe of Science\",\n philosophy: \"Philosophy and Logic\",\n tech: \"Computers and Technology\",\n discover: \"Discover the Web\"\n };\n\n // Available category keys\n const allCategories = [\"science\", \"philosophy\", \"tech\", \"discover\"];\n\n // For the header we now use \"multi\" resources when any additional category is selected.\n const currentCategory =\n additionalCategories.length > 0 ? \"multi\" : primaryCategory;\n\n // Options for the additional categories dropdown: exclude the primary category.\n const additionalOptions = allCategories.filter(cat => cat !== primaryCategory);\n\n // Sort additional options: selected options (in the order they were picked) appear first; then the rest sorted alphabetically.\n additionalOptions.sort((a, b) => {\n const aSelected = additionalCategories.includes(a);\n const bSelected = additionalCategories.includes(b);\n if (aSelected && !bSelected) return -1;\n if (!aSelected && bSelected) return 1;\n if (aSelected && bSelected) {\n return additionalCategories.indexOf(a) - additionalCategories.indexOf(b);\n }\n return a.localeCompare(b);\n });\n\n // When the form is submitted, build a comma‑separated list using\n // the primary category first and then any additional ones.\n const handleSubmit = (e) => {\n e.preventDefault();\n const catParam =\n primaryCategory +\n (additionalCategories.length > 0 ? ',' + additionalCategories.join(',') : '');\n navigate(`/results?q=${encodeURIComponent(query)}&cat=${catParam}`);\n };\n\n // In the primary dropdown, when a user clicks an option,\n // update the primary category, remove it from additional (if needed),\n // and retract the dropdown.\n const handlePrimaryCategorySelect = (cat) => {\n setPrimaryCategory(cat);\n setAdditionalCategories(prev => prev.filter(c => c !== cat));\n setPrimaryDropdownOpen(false);\n };\n\n // For the additional dropdown, toggle a category on or off.\n const handleAdditionalToggle = (cat) => {\n setAdditionalCategories(prev => {\n if (prev.includes(cat)) {\n return prev.filter(c => c !== cat);\n } else {\n return [...prev, cat];\n }\n });\n };\n\n return (\n