fix: placeholder to select element (#9905)

Author: bojangabric

components/Tabs.js

@@ -1,14 +1,15 @@
 import Select from "@components/form/Select";
 import { classNames } from "@services/utils/classNames";
 
-export default function Tabs({ tabs, setTabs, selectedTab }) {
+export default function Tabs({ tabs, setTabs, selectedTab, placeholder }) {
   return (
     <div>
       <div className="sm:hidden">
         {tabs.length > 1 && (
           <Select
             name="tabs"
             value={selectedTab?.name}
+            placeholder={placeholder}
             onChange={(e) =>
               setTabs(tabs.find((tab) => tab.name === e.currentTarget.value))
             }

components/form/Select.js

@@ -2,12 +2,13 @@ import { classNames } from "@services/utils/classNames";
 import Label from "./Label";
 
 export default function Select({
-  value,
+  value = "",
   onChange,
   options = [],
   label,
   name,
   className,
+  placeholder,
   ...restProps
 }) {
   return (
@@ -27,6 +28,11 @@ export default function Select({
         )}
         {...restProps}
       >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
         {options.map((option) => (
           <option
             className="checked:text-secondary-high checked:font-bold dark:checked:text-secondary-low-high"

components/navbar/SubNav.js

@@ -12,5 +12,12 @@ export default function SubNav({ tabs }) {
     });
   };
 
-  return <Tabs tabs={tabs} setTabs={changeTab} selectedTab={selectedTab} />;
+  return (
+    <Tabs
+      tabs={tabs}
+      setTabs={changeTab}
+      selectedTab={selectedTab}
+      placeholder="Choose a category"
+    />
+  );
 }