Update index.css

mohamad-21 · Apr 1, 2024 · 3e4b2e8 · 3e4b2e8
1 parent de6987d
commit 3e4b2e8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 44 deletions.
diff --git a/src/index.css b/src/index.css
@@ -122,37 +122,6 @@ main .search-field {
   opacity: 0.75;
 }
 
-.filter .dropdown-list {
-  position: absolute;
-  background-color: var(--element-background);
-  width: inherit;
-  left: 0;
-  top: calc(100% + 5px);
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  border-radius: 8px;
-  overflow: hidden;
-  height: 0;
-  transition: .2s;
-  padding: 0 1.5rem;
-}
-
-.filter .dropdown-list li {
-  transition: .2s;
-  cursor: pointer;
-}
-
-.filter .dropdown-list li:hover {
-  color: #bbb;
-}
-
-.filter:hover .dropdown-list {
-  height: max-content;
-  padding: 1rem 1.5rem;
-}
-
 main .countries {
   margin-top: 4rem;
   display: grid;

diff --git a/src/pages/Main.js b/src/pages/Main.js
@@ -51,21 +51,21 @@ function Main() {
         <main>
             <div className="search-field">
                 <form onSubmit={searchCountry}>
-                    <ion-icon name="search-outline"></ion-icon>
-                    <input type="text" className="search" placeholder="Search for a country..." onChange={handleSearch} />
+                  <ion-icon name="search-outline"></ion-icon>
+                  <input type="text" className="search" placeholder="Search for a country..." onChange={handleSearch} />
                 </form>
                 <div className="filter">
-                    <header>
-                        <p>{filterRegion.current ? filterRegion.current : 'Filter by region'}</p>
-                        <ion-icon name="chevron-down-outline"></ion-icon>
-                    </header>
-                    <ul className="dropdown-list">
-                        <li className="dropdown-item" onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Africa', 'Africa')}>Africa</li>
-                        <li className="dropdown-item" onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/America', 'America')}>America</li>
-                        <li className="dropdown-item" onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Asia', 'Asia')}>Asia</li>
-                        <li className="dropdown-item" onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Europe', 'Europe')}>Europe</li>
-                        <li className="dropdown-item" onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Oceania', 'Oceania')}>Oceania</li>
-                    </ul>
+                  <header>
+                      <p>{filterRegion.current ? filterRegion.current : 'Filter by region'}</p>
+                      <ion-icon name="chevron-down-outline"></ion-icon>
+                  </header>
+                  <select name="select">
+                    <option onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Africa', 'Africa')}>Africa</option>
+                    <option onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/America', 'America')}>America</option>
+                    <option onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Asia', 'Asia')}>Asia</option>
+                    <option onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Europe', 'Europe')}>Europe</option>
+                    <option onClick={() => fetchByRegion('https://restcountries.com/v3.1/region/Oceania', 'Oceania')}>Oceania</option>
+                  </select>
                 </div>
             </div>
             <div className="countries">