feat: add Input component

2 files changed, 35 insertions, 14 deletions

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index bf98755..b715ba9 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,14 +1,13 @@
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
-export type Props = Partial<{
-  onClick: () => void;
-  route: string;
-  variant: 'contained' | 'outlined';
-  size: 'sm' | 'md' | 'lg';
-  children: string;
-}>
-
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onClick?: () => void;
+  route?: string;
+  variant?: 'contained' | 'outlined';
+  size?: 'sm' | 'md' | 'lg';
+  children?: string;
+}
 
 const variants = {
   contained: 'bg-black text-white',
@@ -21,18 +20,19 @@ const sizes = {
   sm: 'p-3',
 };
 
-const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size = 'md', children }) => {
+const style = 'm-3 font-bold tracking-wide hover:underline focus:outline-none border-2 border-black';
+
+const Button: React.FC<Props> = ({ onClick, route, variant = 'contained', size = 'md', type = 'button', ...props }) => {
   const history = useHistory();
   const navigateRoute = useCallback(() => history.push(route || '/'), [route, history]);
 
   return (
     <button
-      type="button"
+      type={type}
       onClick={route ? navigateRoute : onClick}
-      className={`m-3 font-bold tracking-wide hover:underline focus:outline-none border-2 border-black ${variants[variant]} ${sizes[size]}`}
-    >
-      {children}
-    </button>
+      className={`${style} ${variants[variant]} ${sizes[size]}`}
+      {...props}
+    />
   );
 };
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..69b97a2
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+const Input: React.FC<Props> = ({ label, ...props }) => {
+  return (
+    <div className="m-2 mb-4 flex flex-col">
+      <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
+      <input
+        id={props?.name}
+        placeholder={label}
+        className="p-2 border-2 border-black focus:outline-none"
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default Input;