Initial snapshot - OpenTelemetry demo 2.1.3 -f

1 files changed, 39 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};
+`;