40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { Skeleton } from "./ui/skeleton";
|
|
|
|
export default function AppTextArea({
|
|
inputValue,
|
|
inputOnChange,
|
|
inputPlaceholder,
|
|
inputDir,
|
|
disabled,
|
|
inputTitle,
|
|
loading,
|
|
}: {
|
|
inputValue: string;
|
|
inputOnChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
inputPlaceholder: string;
|
|
inputDir?: string;
|
|
disabled?: boolean;
|
|
inputTitle: string;
|
|
loading?: boolean;
|
|
}) {
|
|
return (
|
|
<div className="w-full flex flex-col gap-2">
|
|
<p className={"text-R14 text-foreground dark:text-gray-200"}>
|
|
{inputTitle}
|
|
</p>
|
|
{loading ? (
|
|
<Skeleton className="w-full h-[120px]" />
|
|
) : (
|
|
<textarea
|
|
dir={inputDir || "rtl"}
|
|
placeholder={inputPlaceholder}
|
|
value={inputValue}
|
|
onChange={inputOnChange}
|
|
disabled={disabled}
|
|
className="flex h-[120px] w-full rounded-[12px] border border-input bg-inputBg px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-inputPlaceholder focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 dark:placeholder:text-gray-400"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|