[#2, #5] feat: add Basket component

client/src/components/Basket/index.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+import cn from "classnames";
+import styles from "./styles.module.scss";
+
+export default function Basket() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [count] = useState(0);
+
+  const openCart = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <button
+      onClick={() => openCart()}
+      className={cn(styles.Container, isOpen && styles.Open)}
+    >
+      <span className={cn(styles.Count, count === 0 && styles.Hidden)}>
+        {count}
+      </span>
+      Sepetim
+    </button>
+  );
+}
+
+// button
+// carttaki eleman sayisi gosteren imlec
+// basket detail
+// icerisindeki elemanlar

client/src/components/Basket/styles.module.scss

@@ -0,0 +1,43 @@
+@use "../../global/variables.scss" as vars;
+
+.Container {
+  border: 1px solid vars.$border-color;
+  background-color: #ffff;
+  border-radius: 4px;
+  width: 120px;
+  min-width: 120px;
+  height: 48px;
+  min-height: 48px;
+  color: vars.$border-color;
+  font-size: 17px;
+  line-height: 24.31px;
+  position: relative;
+
+  &.Open {
+    border-radius: 4px 4px 0 0;
+    border-bottom-color: #ffff;
+  }
+
+  .Count {
+    position: absolute;
+    top: -7px;
+    right: -4px;
+    width: 18px;
+    height: 18px;
+    min-width: 18px;
+    min-height: 18px;
+    font-size: 12px;
+    color: #ffff;
+    line-height: 100%;
+    font-weight: 500;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: vars.$brand-color;
+
+    &.Hidden {
+      display: none;
+    }
+  }
+}

client/src/components/Layout/Header/index.jsx

@@ -1,14 +1,14 @@
 import styles from "./styles.module.scss";
 import { Logo } from "../../../assets";
-import { Search } from "../..";
+import { Search, Basket } from "../..";
 export default function Header() {
   return (
     <header className={styles.Container}>
       <a href="/" target="" title="Hepsiburada">
         <img className={styles.Logo} src={Logo} alt="hb-logo" />
       </a>
       <Search />
-      <div>Header</div>
+      <Basket />
     </header>
   );
 }

client/src/components/Search/styles.module.scss

@@ -5,6 +5,7 @@
   align-items: center;
   justify-content: flex-start;
   width: 669px;
+  min-width: 669px;
   height: 48px;
   padding: 0 20px;
   border-radius: 100px;

client/src/components/index.jsx

@@ -4,3 +4,4 @@ export { default as Section } from "./Layout/Section";
 export { default as Sidebar } from "./Layout/Sidebar";
 export { default as SubHeader } from "./Layout/SubHeader";
 export { default as Search } from "./Search";
+export { default as Basket } from "./Basket";