styling update

app/components/ItemPicker.tsx

@@ -1,16 +1,31 @@
+import { twMerge } from "tailwind-merge";
 import { H4 } from ".";
 
+
 interface ItemPickerProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   label: string
+  selected: boolean;
+  onSelected : (val:string)=>void;
 }
 
 export const ItemPicker = ({
   label,
+  selected = false,
+  onSelected,
   ...imgProps
 }:ItemPickerProps) => {
+
+  const handleSelected = ()=>{
+    onSelected(label);
+  };
+
   return (
-    <div className="relative border border-ui-border rounded-lg overflow-hidden">
+    <div
+      className={twMerge("relative border-2 rounded-lg overflow-hidden cursor-pointer transition-colors ease-in-out", selected ? "border-brand-primary" : "border-ui-border")}
+      onClick={handleSelected}
+    >
       <img className="aspect-square min-w-20" {...imgProps} />
+      <div className="bg-gradient-to-t from-gray-700 to-transparent absolute top-0 left-0 w-full h-full"/>
       <H4 className="absolute bottom-0 left-2 drop-shadow-md">{label}</H4>
     </div>
   )

app/components/Textarea.tsx

@@ -7,11 +7,18 @@ export const Textarea = ({
 }:TextareaHTMLAttributes<HTMLTextAreaElement>) => {
   return(
     <textarea
-      {...rest}
+      
       className={twMerge(
         "rounded-lg bg-ui-controls border border-ui-panel-border py-2 px-4"
         ,className
       )}
+      style={{
+        outline: "2px solid transparent",
+        transition: "outline-color 0.15s ease-in-out",
+      }}
+      onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
+      onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
+      {...rest}
     />
   );
 }

app/pages/PageEnigma/comps/SidePanelTabs/TabStyling.tsx

@@ -1,5 +1,7 @@
+import { useState } from 'react';
 
 import {
+  Button,
   H4,
   ItemPicker,
   Textarea
@@ -7,8 +9,10 @@ import {
 
 
 export const TabStyling = ()=>{
+  const [ selection, setSelection ] = useState<string>("Anime");
   const handlePickingStyle = (picked:string)=>{
     console.log(`Picked style: ${picked}`);
+    setSelection(picked);
   }
 
   return(
@@ -17,36 +21,43 @@ export const TabStyling = ()=>{
       <div className="flex gap-2 my-2">
         <ItemPicker
           label="Anime"
-          onClick={()=>handlePickingStyle("anime")}
+          selected={(selection === "Anime")}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/0.webp"
         />
         <ItemPicker
           label="Pixel"
-          onClick={()=>handlePickingStyle("pixel")}
+          selected={selection === "Pixel"}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/1.webp"
         />
         <ItemPicker
           label="Pixar"
-          onClick={()=>handlePickingStyle("pixar")}
+          selected={selection === "Pixar"}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/2.webp"
         />
         <ItemPicker
           label="Stylized"
-          onClick={()=>handlePickingStyle("stylized")}
+          selected={selection === "Stylized"}
+          onSelected={handlePickingStyle}
           src="/resources/avatars/3.webp"
         />
       </div>
       <H4>Enter a Prompt</H4>
       <div className="flex gap-2 my-2">
-        <Textarea className="w-full" />
+        <Textarea className="w-full h-32"/>
       </div>
       <H4>Negative Prompt</H4>
       <div className="flex gap-2 my-2">
         <Textarea
-          className="w-full"
+          className="w-full h-32"
           placeholder="Type here to filter out the things you don't want in the scene
         "/>
       </div>
+      <div className="flex gap-2 mt-6 justify-center">
+        <Button>Preview Side by Side</Button>
+      </div>
     </>
   );