artcraft/app/components/Textarea.tsx

import { TextareaHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
import { Label } from "./Typography";
import { kebabCase } from "~/utilities";

type ResizeType =
  | "none"
  | "both"
  | "horizontal"
  | "vertical"
  | "block"
  | "inline"
  | undefined;

export const Textarea = ({
  className,
  label,
  resize = "vertical",
  id,
  ...rest
}: TextareaHTMLAttributes<HTMLTextAreaElement> & {
  label?: string;
  resize?: ResizeType;
}) => {
  return (
    <div className="flex flex-col">
      {label && 
        <Label htmlFor={id ? id : kebabCase(label)}>
          {label}
        </Label>
      }
      
      <textarea
        id={id ? id : (label ? kebabCase(label) : undefined)}
        className={twMerge(
          "rounded-lg border border-ui-panel-border bg-ui-controls p-3",
          className,
        )}
        style={{
          outline: "2px solid transparent",
          transition: "outline-color 0.15s ease-in-out",
          resize: resize,
        }}
        onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
        onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
        {...rest}
      />
    </div>
  );
};