Add header component

Author: andriiafanasiev

.gitignore

@@ -0,0 +1,2 @@
+
+node_modules

package-lock.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.14"
   }
 }

package.json

@@ -0,0 +1,12 @@
+import './App.css';
+import Header from './components/Header/Header';
+
+function App() {
+  return (
+    <div className="App">
+      <Header></Header>
+    </div>
+  );
+}
+
+export default App;

public/img/icons/cart.svg

@@ -0,0 +1,31 @@
+import PhoneSelector from './PhoneSelector';
+function Header() {
+  return (
+    <header>
+      <div className="flex max-w-[1100px] p-[10px] items-center w-full justify-between mx-auto">
+        <div className="flex justify-between items-center gap-[75px]">
+          <div className="font-bold text-[25px]">QPICK</div>
+          <PhoneSelector />
+        </div>
+        <div>
+          <div className="flex items-center gap-[25px]">
+            <div className="relative cursor-pointer ">
+              <img src="/img/icons/favorite.svg" alt="" />
+              <span className=" absolute top-[-10px] right-[-10px] font-medium bg-[#FFA542] text-[15px] text-white rounded-full w-[17px] h-[17px] flex items-center justify-center ">
+                0
+              </span>
+            </div>
+            <div className="relative cursor-pointer ">
+              <img src="/img/icons/cart.svg" alt="" />
+              <span className=" absolute top-[-10px] right-[-10px] font-medium bg-[#FFA542] text-[15px] text-white rounded-full w-[17px] h-[17px] flex items-center justify-center ">
+                0
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default Header;

public/img/icons/dropdown.svg

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+function PhoneSelector() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedPhone, setSelectedPhone] = useState();
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleSelect = (phone) => {
+    setSelectedPhone(phone);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="flex items-center gap-[10px]">
+      <div>
+        <img src="/img/icons/phone.svg" alt="phone icon" />
+      </div>
+      <div className="relative" onClick={toggleDropdown}>
+        <div className="flex items-center gap-[8px] w-full bg-transparent border-none cursor-pointer p-2">
+          <span className="block min-w-[150px] max-w-[200px] w-full truncate">
+            {selectedPhone || 'Choose a phone model'}
+          </span>
+          <img src="/img/icons/dropdown.svg" alt="dropdown icon" />
+        </div>
+        <ul
+          className={`absolute left-0 w-full bg-white border border-gray-300 flex flex-col rounded mt-1 ${
+            isOpen ? '' : 'hidden'
+          }`}
+        >
+          {[
+            'iPhone 12',
+            'iPhone 12 Max',
+            'iPhone 13',
+            'iPhone 13 Max',
+            'iPhone 13 Pro Max',
+            'iPhone 14',
+          ].map((phone) => (
+            <li
+              key={phone}
+              className="p-2 text-start hover:bg-gray-200 cursor-pointer"
+              onClick={() => handleSelect(phone)}
+            >
+              {phone}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default PhoneSelector;

public/img/icons/favorite.svg

@@ -1,10 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:wght@500&display=swap');
+
 * {
   margin: 0;
   padding: 0;
 }
 
 body {
-  font-family: 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: "Montserrat", sans-serif;
 }

public/img/icons/phone.svg

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};