1 files changed, 27 insertions, 0 deletions
diff --git a/src/frontend/components/CartIcon/CartIcon.tsx b/src/frontend/components/CartIcon/CartIcon.tsx
new file mode 100644
index 0000000..8ec128a
--- /dev/null
+++ b/src/frontend/components/CartIcon/CartIcon.tsx
@@ -0,0 +1,27 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { useCart } from '../../providers/Cart.provider';
+import CartDropdown from '../CartDropdown';
+import * as S from './CartIcon.styled';
+
+const CartIcon = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    cart: { items },
+  } = useCart();
+
+  return (
+    <>
+      <S.CartIcon data-cy={CypressFields.CartIcon} onClick={() => setIsOpen(true)}>
+        <S.Icon src="/icons/CartIcon.svg" alt="Cart icon" title="Cart" />
+        {!!items.length && <S.ItemsCount data-cy={CypressFields.CartItemCount}>{items.length}</S.ItemsCount>}
+      </S.CartIcon>
+      <CartDropdown productList={items} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+};
+
+export default CartIcon;