Initial snapshot - OpenTelemetry demo 2.1.3 -f

3 files changed, 70 insertions, 0 deletions

diff --git a/src/frontend/components/CartIcon/CartIcon.styled.ts b/src/frontend/components/CartIcon/CartIcon.styled.ts
new file mode 100644
index 0000000..d76e4fd
--- /dev/null
+++ b/src/frontend/components/CartIcon/CartIcon.styled.ts
@@ -0,0 +1,39 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Image from 'next/image';
+import styled from 'styled-components';
+
+export const CartIcon = styled.a`
+  position: relative;
+  display: block;
+  margin-left: 25px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`;
+
+export const Icon = styled(Image).attrs({
+  width: '24',
+  height: '24',
+})`
+  margin-bottom: 3px;
+`;
+
+export const ItemsCount = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 9px;
+  left: 15px;
+  width: 15px;
+  height: 15px;
+  font-size: ${({ theme }) => theme.sizes.nano};
+  border-radius: 50%;
+  border: 1px solid ${({ theme }) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.white};
+  background: ${({ theme }) => theme.colors.otelRed};
+`;
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;
diff --git a/src/frontend/components/CartIcon/index.ts b/src/frontend/components/CartIcon/index.ts
new file mode 100644
index 0000000..ffb59cc
--- /dev/null
+++ b/src/frontend/components/CartIcon/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CartIcon';