Initial snapshot - OpenTelemetry demo 2.1.3 -f

3 files changed, 89 insertions, 0 deletions

diff --git a/src/frontend/components/Input/Input.styled.ts b/src/frontend/components/Input/Input.styled.ts
new file mode 100644
index 0000000..d2078d1
--- /dev/null
+++ b/src/frontend/components/Input/Input.styled.ts
@@ -0,0 +1,54 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import styled from 'styled-components';
+
+export const Input = styled.input`
+  width: -webkit-fill-available;
+  border: none;
+  padding: 16px;
+  outline: none;
+
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+
+  border-radius: 10px;
+  background: #f9f9f9;
+  border: 1px solid #cacaca;
+`;
+
+export const InputLabel = styled.p`
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+  font-weight: ${({ theme }) => theme.fonts.semiBold};
+  margin: 0;
+  margin-bottom: 15px;
+`;
+
+export const Select = styled.select`
+  width: 100%;
+  border: none;
+
+  padding: 16px;
+  font-weight: ${({ theme }) => theme.fonts.regular};
+  font-size: ${({ theme }) => theme.sizes.dMedium};
+
+  border-radius: 10px;
+  background: #f9f9f9;
+  border: 1px solid #cacaca;
+`;
+
+export const InputRow = styled.div`
+  position: relative;
+  margin-bottom: 24px;
+`;
+
+export const Arrow = styled.img.attrs({
+  src: '/icons/Chevron.svg',
+  alt: 'arrow',
+})`
+  position: absolute;
+  right: 20px;
+  width: 10px;
+  height: 5px;
+  top: 64px;
+`;
diff --git a/src/frontend/components/Input/Input.tsx b/src/frontend/components/Input/Input.tsx
new file mode 100644
index 0000000..14782b0
--- /dev/null
+++ b/src/frontend/components/Input/Input.tsx
@@ -0,0 +1,31 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
+import * as S from './Input.styled';
+
+interface IProps extends InputHTMLAttributes<HTMLSelectElement | HTMLInputElement> {
+  type: HTMLInputTypeAttribute | 'select';
+  children?: React.ReactNode;
+  label: string;
+}
+
+const Input = ({ type, id = '', children, label, ...props }: IProps) => {
+  return (
+    <S.InputRow>
+      <S.InputLabel>{label}</S.InputLabel>
+      {type === 'select' ? (
+        <>
+          <S.Select id={id} {...props}>
+            {children}
+          </S.Select>
+          <S.Arrow />
+        </>
+      ) : (
+        <S.Input id={id} {...props} type={type} />
+      )}
+    </S.InputRow>
+  );
+};
+
+export default Input;
diff --git a/src/frontend/components/Input/index.ts b/src/frontend/components/Input/index.ts
new file mode 100644
index 0000000..f1d0923
--- /dev/null
+++ b/src/frontend/components/Input/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export {default} from './Input';