From 82e03978b89938219958032efb1448cc76baa181 Mon Sep 17 00:00:00 2001
From: Saumit <justsaumit@protonmail.com>
Date: Sat, 27 Sep 2025 02:14:26 +0530
Subject: Initial snapshot - OpenTelemetry demo 2.1.3 -f

---
 src/frontend/components/CartIcon/CartIcon.tsx | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/frontend/components/CartIcon/CartIcon.tsx

(limited to 'src/frontend/components/CartIcon/CartIcon.tsx')

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;
-- 
cgit v1.2.3