added selector component. all questions page fixes and improvements

src/components/Question.jsx

@@ -6,8 +6,11 @@ function highlightText(text, toHighlight) {
   }
   try {
     const re = new RegExp(toHighlight, 'gi')
-    const splitText = text.split(toHighlight)
-    console.log(splitText)
+    const splitText = text.split(re)
+    if (splitText.length === 1) {
+      return text
+    }
+
     return (
       <>
         {splitText[0]}

src/components/Selector.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import styles from './Selector.module.css'
+
+export default function Selector(props) {
+  const { activeItem, data, onSelect, getLength, getName } = props
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const dataToDisplay = data.filter((item) => {
+    return getName(item).toLowerCase().includes(searchTerm.toLowerCase())
+  })
+
+  return (
+    <div className={styles.container}>
+      <input
+        type={'text'}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        placeholder={'Kezdj el írni a kereséshez ...'}
+      />
+      <div className="selector">
+        {dataToDisplay.length === 0 && (
+          <div className={styles.noResult}>
+            <span className={styles.itemName}>{'Nincs találat'}</span>
+          </div>
+        )}
+        {dataToDisplay.map((item, i) => {
+          return (
+            <div
+              className={
+                activeItem && getName(activeItem) === getName(item)
+                  ? 'selectorItem activeSelectorItem'
+                  : 'selectorItem'
+              }
+              key={i}
+              onClick={() => onSelect(item)}
+            >
+              <span className={styles.itemName}>{getName(item)}</span>
+              {getLength && (
+                <span className={styles.questionCount}>
+                  [ {getLength(item)} ]
+                </span>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/components/Selector.module.css

@@ -0,0 +1,23 @@
+.questionCount {
+  justify-content: flex-end;
+  white-space: nowrap;
+}
+
+.itemName {
+  word-wrap: break-word;
+}
+
+.container {
+    width: 450px
+}
+
+.container input {
+  border: 1px solid var(--text-color);
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.noResult {
+    margin: 5px;
+    text-align: center;
+}

src/components/SubjectSelector.jsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import styles from './SubjectSelector.module.css'
 
 export default function SubjectSelector(props) {