first stylings

src/components/TextInput.tsx

@@ -1,21 +1,37 @@
 import classNames from "classnames";
 import { omit } from "lodash";
 import React from "react";
+import "../index.css";
 
 type Props = {
     placeholder?: string | undefined,
-    color?: string |undefined, 
     className?: string | undefined,
 } & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
 
 export const TextInput = ({
     placeholder = undefined,
-    color = "white",
     className,
     ...props
 } :Props) => {
     return(
-        <input type="text" placeholder={placeholder} color={color} className={classNames({className})} />
+        <input 
+            type="text" 
+            placeholder={placeholder} 
+            className={classNames(
+                'w-100',
+                'border',
+                'border-2',
+                'border-solid',
+                'border-gray-200',
+                'text-gray-900',
+                'rounded',
+                'outline-none',
+                'hover:border-gray-300',
+                'focus:border-gray-500',                
+                {
+                className
+            })} 
+        />
     );
     
 }

src/stories/TextInput.stories.tsx

@@ -12,6 +12,5 @@ const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args
 export const TextInputStory = Template.bind({});
 
 TextInputStory.args ={
-    placeholder: "uaaaaaa",
-    color: 'blue'
+    placeholder: "Search",
 }