Add Input and AmountInput component

1 files changed, 42 insertions, 0 deletions

diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
new file mode 100644
index 000000000..fc4fed14e
--- /dev/null
+++ b/packages/instant/src/components/ui/input.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+import { Container, Flex, Text } from '../ui';
+
+export interface InputProps {
+    className?: string;
+    value?: string;
+    width?: string;
+    fontSize?: string;
+    fontColor?: ColorOption;
+    placeholder?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
+    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
+);
+
+export const Input = styled(PlainInput)`
+    font-size: ${props => props.fontSize};
+    width: ${props => props.width};
+    padding: 0.1em 0em;
+    font-family: 'Inter UI';
+    color: ${props => props.theme[props.fontColor || 'white']};
+    background: transparent;
+    outline: none;
+    border: none;
+    &::placeholder {
+        color: ${props => props.theme[props.fontColor || 'white']};
+        opacity: 0.5;
+    }
+`;
+
+Input.defaultProps = {
+    width: 'auto',
+    fontColor: ColorOption.white,
+    fontSize: '12px',
+};
+
+Input.displayName = 'Input';