From 00c29d39d0908ce32efdb8eca86afcc1a2c4a80e Mon Sep 17 00:00:00 2001
From: Maximus <ten.maksim97@gmail.com>
Date: Mon, 8 Aug 2022 12:10:13 +0300
Subject: [PATCH] first stylings
---
src/components/TextInput.tsx | 22 +++++++++++++++++++---
src/stories/TextInput.stories.tsx | 3 +--
2 files changed, 20 insertions(+), 5 deletions(-)
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index a75a357..db08bca 100644
--- a/src/components/TextInput.tsx
+++ b/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
+ })}
+ />
);
}
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
index 68795bb..449a39a 100644
--- a/src/stories/TextInput.stories.tsx
+++ b/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",
}
\ No newline at end of file