added 2 views of text input component: when it in group and not in group

src/components/TextInput.tsx

@@ -1,37 +1,56 @@
 import classNames from "classnames";
-import { omit } from "lodash";
+import { initial, isEmpty, omit } from "lodash";
 import React from "react";
 import "../index.css";
 
 type Props = {
-    placeholder?: string | undefined,
+    inGroup?: boolean,
-    className?: string | undefined,
+    placeholder?: string | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
+    className?: string | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "">;
+
+const inputNotInGroup = [
+    `border
+    border-2
+    border-solid
+    border-gray-200
+    hover:border-gray-500
+    active:border-gray-500
+    focus:border-gray-500`
+]
+
+const inputInGroup = [
+    `border-none
+    hover:none
+    active:none
+    focus:none
+    `
+]
 
 export const TextInput = ({
-    placeholder = undefined,
+    inGroup = false, // We should use this flag to choose how we will style our text input component
+    placeholder,
     className,
     ...props
-} :Props) => {
+}: Props) => {
-    return(
+
-        <input 
+  return (
-            type="text" 
+    <input
-            placeholder={placeholder} 
+      type="text"
-            className={classNames(
+      placeholder={placeholder}
-                'w-100',
+      className={classNames([
-                'border',
+        "w-full",
-                'border-2',
+        "text-gray-900",
-                'border-solid',
+        "rounded",
-                'border-gray-200',
+        "outline-none",
-                'text-gray-900',
+        "placeholder-text-500",
-                'rounded',
+        {   
-                'outline-none',
+            //it this part we define how we style 
-                'hover:border-gray-300',
+            [`${inputNotInGroup}`] : !inGroup,
-                'focus:border-gray-500',                
+            [`${inputInGroup}`] : inGroup,
-                {
+        },
-                className
+        className,        
-            })} 
+      ])}
-        />
+    />
-    );
+  );
-    
+};
-}

src/stories/TextInput.stories.tsx

@@ -12,5 +12,7 @@ const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args
 export const TextInputStory = Template.bind({});
 
 TextInputStory.args ={
+    inGroup: true,
     placeholder: "Search",
-}
+    className: ["px-4", "py-2.5"]
+};