added selector component. all questions page fixes and improvements

src/pages/_error.jsx

@@ -1,3 +1,5 @@
+import React from 'react'
+
 function Error({ statusCode }) {
   const render404 = () => {
     return (

src/pages/allQuestions.jsx

@@ -7,6 +7,7 @@ import Subject from '../components/Subject'
 import SubjectSelector from '../components/SubjectSelector'
 import ExternalLinkIcon from '../components/externalLinkIcon'
 import SearchBar from '../components/searchBar'
+import Selector from '../components/Selector'
 
 import styles from './allQuestions.module.css'
 
@@ -202,13 +203,16 @@ export default function AllQuestions({ router, globalState, setGlobalState }) {
             </div>
           </div>
           <div className={'selectContainer'}>
-            <select
-              value={selectedDb}
-              onChange={(event) => {
-                const key = event.target.value
+            <Selector
+              data={[...dbs, { path: 'all', name: 'Összes kérdés' }]}
+              getName={(db) => db.name}
+              activeItem={dbs[selectedDb]}
+              onSelect={(item) => {
+                // FIXME: active item is all then no highlight
+                const key = dbs.findIndex((x) => x.path === item.path)
                 setData(null)
-                setSelectedDb(key)
-                if (parseInt(key) === -1) {
+                setSelectedDb(key === 'all' ? 'all' : key)
+                if (key === 'all') {
                   router.replace(
                     `${router.pathname}?question=${encodeURIComponent(
                       searchTerm
@@ -228,19 +232,7 @@ export default function AllQuestions({ router, globalState, setGlobalState }) {
                   { shallow: true }
                 )
               }}
-            >
-              <option value={-1}>{' Válassz egy adatbázist!'}</option>
-              {dbs.map((db, i) => {
-                return (
-                  <option value={i} key={db.path}>
-                    {db.name}
-                  </option>
-                )
-              })}
-              <option value={'all'} key={'all'}>
-                {'Összes kérdés'}
-              </option>
-            </select>
+            />
           </div>
         </>
       )