Add price and category filters

src/components/Filters/Filters.css

@@ -0,0 +1,13 @@
+.filters {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.filters > div {
+  display: flex;
+  gap: 1rem;
+  outline: 'none'
+}

src/components/Filters/Filters.jsx

@@ -0,0 +1,37 @@
+import { useState } from 'react'
+import './Filters.css'
+
+export function Filters () {
+  const [minPrice, setMinPrice] = useState(0)
+
+  const handleChangeMinPrice = (event) => {
+    setMinPrice(event.target.value)
+  }
+
+  return (
+    <section className="filters">
+
+      <div>
+        <label htmlFor="price">Min. price</label>
+        <input
+          type="range"
+          id="price"
+          min='0'
+          max='1000'
+          onChange={handleChangeMinPrice}
+        />
+        <span>{minPrice}€</span>
+      </div>
+
+      <div>
+        <label htmlFor="category">Category</label>
+        <select id="category">
+          <option value="all">All</option>
+          <option value="laptops">Laptops</option>
+          <option value="smartphones">Smartphones</option>
+        </select>
+      </div>
+
+    </section>
+  )
+}

src/components/Header/Header.jsx

@@ -0,0 +1,11 @@
+import { Filters } from "../Filters/Filters"
+
+export function Header () {
+  return (
+    <header>
+      <h1>Shopping ReactCart</h1>
+
+      <Filters />
+    </header>
+  )
+}

src/components/Products/Products.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import './Products.css'
-import { AddToCartIcon } from '../Icons/Icons.jsx'
+import { AddToCartIcon } from '../Icons/Icons'
 
 export function Products ({ products }) {
   return (

src/components/app/App.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { Header } from '../Header/Header'
 import { products as initialProducts } from '../../mocks/products.json'
 import { Products } from '../Products/Products'
 import './App.css'
@@ -27,7 +28,7 @@ function App() {
   return (
     <>
       <div>
-        <h1>Shopping cart</h1>
+        <Header />
 
         <Products products={filteredProducts}/>
       </div>