Create Input component

components/Input.js

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { COLORS } from '../lib/constants'
+
+const Input = ({
+  accept,
+  color = COLORS.SECONDARY,
+  name,
+  onChange = () => {},
+  placeholder,
+  title,
+  type,
+  value,
+  align = 'right'
+}) => {
+  return (
+    <React.Fragment>
+      <input
+        type={type}
+        accept={accept}
+        title={title}
+        placeholder={placeholder}
+        value={value}
+        name={name}
+        onChange={onChange}
+      />
+      <style jsx>
+        {`
+          input {
+            width: 100%;
+            font-size: 12px;
+            color: ${color};
+            background: transparent;
+            border: none;
+            outline: none;
+            text-align: ${align};
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+
+          input::placeholder {
+            color: ${color};
+            opacity: 0.4;
+          }
+
+          input[type='file'] {
+            cursor: pointer;
+            outline: none;
+          }
+        `}
+      </style>
+    </React.Fragment>
+  )
+}
+
+export default Input