Initial snapshot - OpenTelemetry demo 2.1.3 -f

3 files changed, 106 insertions, 0 deletions

diff --git a/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts
new file mode 100644
index 0000000..6ea0669
--- /dev/null
+++ b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.styled.ts
@@ -0,0 +1,65 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const CurrencySwitcher = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-left: 40px;
+  color: #605f64;
+
+  &::-webkit-input-placeholder,
+  &::-moz-placeholder,
+  :-ms-input-placeholder,
+  :-moz-placeholder {
+    font-size: 12px;
+    color: #605f64;
+  }
+`;
+
+export const SelectedConcurrency = styled.span`
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  text-align: center;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+
+  position: relative;
+  left: 35px;
+  width: 20px;
+  display: inline-block;
+`;
+
+export const Arrow = styled.img.attrs({
+  src: '/icons/Chevron.svg',
+  alt: 'arrow',
+})`
+  position: absolute;
+  right: 15px;
+  width: 12px;
+  height: 17px;
+`;
+
+export const Select = styled.select`
+  -webkit-appearance: none;
+  -webkit-border-radius: 0px;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  background: transparent;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  border: 1px solid ${({ theme }) => theme.colors.borderGray};
+  width: 130px;
+  height: 40px;
+  flex-shrink: 0;
+  padding: 1px 0 0 45px;
+  font-size: 16px;
+  border-radius: 10px;
+`;
diff --git a/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx
new file mode 100644
index 0000000..0e3b174
--- /dev/null
+++ b/src/frontend/components/CurrencySwitcher/CurrencySwitcher.tsx
@@ -0,0 +1,37 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react';
+import getSymbolFromCurrency from 'currency-symbol-map';
+import { useCurrency } from '../../providers/Currency.provider';
+import * as S from './CurrencySwitcher.styled';
+import { CypressFields } from '../../utils/enums/CypressFields';
+
+const CurrencySwitcher = () => {
+  const { currencyCodeList, setSelectedCurrency, selectedCurrency } = useCurrency();
+
+  const currencySymbol = useMemo(() => getSymbolFromCurrency(selectedCurrency), [selectedCurrency]);
+
+  return (
+    <S.CurrencySwitcher>
+      <S.Container>
+        <S.SelectedConcurrency>{currencySymbol}</S.SelectedConcurrency>
+        <S.Select
+          name="currency_code"
+          onChange={(event: { target: { value: string; }; }) => setSelectedCurrency(event.target.value)}
+          value={selectedCurrency}
+          data-cy={CypressFields.CurrencySwitcher}
+        >
+          {currencyCodeList.map(currencyCode => (
+            <option key={currencyCode} value={currencyCode}>
+              {currencyCode}
+            </option>
+          ))}
+        </S.Select>
+        <S.Arrow />
+      </S.Container>
+    </S.CurrencySwitcher>
+  );
+};
+
+export default CurrencySwitcher;
diff --git a/src/frontend/components/CurrencySwitcher/index.ts b/src/frontend/components/CurrencySwitcher/index.ts
new file mode 100644
index 0000000..3a0af9c
--- /dev/null
+++ b/src/frontend/components/CurrencySwitcher/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CurrencySwitcher';