implementing cart component and adding dropdown option

Author: AdityaKumawat97

src/assets/shopping-bag.svg

@@ -0,0 +1,12 @@
+import React from 'react'
+import CustomButton from '../custom-button/custom-button.component'
+import './cart-dropdown.styles.scss'
+export default function CartDropdown() {
+    return (
+        <div className="cart-dropdown">
+            <div className="cart-item">
+                <CustomButton>GO TO CHECKOUT</CustomButton>
+            </div>
+        </div>
+    )
+}

src/components/cart-dropdown/cart-dropdown.component.jsx

@@ -0,0 +1,24 @@
+.cart-dropdown {
+    position: absolute;
+    width: 240px;
+    height: 340px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    border: 1px solid black;
+    background-color: white;
+    top: 90px;
+    right: 40px;
+    z-index: 5;
+
+    .cart-items {
+        height: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow: scroll;
+    }
+
+    button {
+        margin-top: auto;
+    }
+}

src/components/cart-dropdown/cart-dropdown.styles.scss

@@ -0,0 +1,11 @@
+import React from 'react'
+import './cart-icon.styles.scss'
+import { ReactComponent as ShoppingIcon } from '../../assets/shopping-bag.svg'
+export default function CartIcon() {
+    return (
+        <div className="cart-icon">
+            <ShoppingIcon className="shopping-icon" />
+            <span className="item-count">0</span>
+        </div>
+    )
+}

src/components/cart-icon/Cart-icon.jsx

@@ -0,0 +1,21 @@
+.cart-icon {
+    width: 45px;
+    height: 45px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .shopping-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    .item-count {
+        position: absolute;
+        font-size: 10px;
+        font-weight: bold;
+        bottom: 12px;
+    }
+}

src/components/cart-icon/cart-icon.styles.scss

@@ -4,7 +4,8 @@ import './header.styles.scss'
 import { ReactComponent as Logo } from '../../assets/newLogo.svg'
 import { Link } from 'react-router-dom'
 import { auth } from '../../firebase/firebase.utils'
-
+import CartIcon from '../cart-icon/Cart-icon'
+import CartDropdown from '../cart-dropdown/cart-dropdown.component'
 function Header({ currentUser }) {
     return (
         <div className="header">
@@ -28,8 +29,9 @@ function Header({ currentUser }) {
                             SIGN IN
                         </Link>
                 }
-
+                <CartIcon />
             </div>
+            <CartDropdown />
         </div>
     )
 }