From f51ab29cd16f08dedce04c752d2a0b45563870e2 Mon Sep 17 00:00:00 2001
From: raboid <sean@dawnlabs.io>
Date: Mon, 7 Jan 2019 17:35:59 -0500
Subject: [PATCH] Create Input component

---
 components/Input.js | 57 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 components/Input.js

diff --git a/components/Input.js b/components/Input.js
new file mode 100644
index 0000000..31c4a34
--- /dev/null
+++ b/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