fix: mobile select

LeleDallas · Aug 10, 2023 · ec363ff · ec363ff
1 parent 776ad73
commit ec363ff
Showing 1 changed file with 8 additions and 18 deletions.
diff --git a/src/screens/Projects.tsx b/src/screens/Projects.tsx
@@ -29,33 +29,23 @@ const Projects = ({ active }: ScreenProps) => {
             <section className="projects">
 
                 <ul className="filter-list">
-
                     {items.map(item =>
                         <li key={item} className="filter-item">
                             <button
                                 onClick={() => setSelectedCategory(item as Categories)}
                                 className={checkActive(item as Categories, selectedCategory)}
                             >{item}
                             </button>
-                        </li>)}
+                        </li>
+                    )}
                 </ul>
                 <div className="filter-select-box">
-                    <button className="filter-select" >
-                        <div className="select-value" >Select category</div>
-                        <div className="select-icon">
-                            <IconFont name="see" />
-                        </div>
-                    </button>
-                    <ul className="select-list">
-                        {items.map(item =>
-                            <li key={item} className="select-item">
-                                <button
-                                    onClick={() => setSelectedCategory(item as Categories)}
-                                    className={checkActive(item as Categories, selectedCategory)}
-                                >{item}
-                                </button>
-                            </li>)}
-                    </ul>
+                    <select
+                        onChange={(item) => setSelectedCategory(item.target.value as Categories)}
+                        placeholder="Select category" className="filter-select">
+                        {items.map(item => <option key={item} value={item}>{item}</option>)}
+                        <IconFont name="see" />
+                    </select>
                 </div>
 
                 <ul className="project-list">