Spaces:
Sleeping
Sleeping
File size: 2,236 Bytes
af27737 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | "use client";
import { useEffect, useRef, useState } from "react";
type CommandConsoleProps = {
isProcessing: boolean;
onSubmit: (value: string) => void;
};
export default function CommandConsole({
isProcessing,
onSubmit,
}: CommandConsoleProps) {
const [value, setValue] = useState("");
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
useEffect(() => {
if (!textareaRef.current) return;
textareaRef.current.style.height = "0px";
const nextHeight = Math.min(textareaRef.current.scrollHeight, 220);
textareaRef.current.style.height = `${nextHeight}px`;
}, [value]);
const handleSubmit = () => {
if (isProcessing) return;
const trimmed = value.trim();
if (!trimmed) return;
onSubmit(trimmed);
setValue("");
};
return (
<div className="h-full border-t border-neutral-900 px-6 py-4">
<form
className="flex h-full flex-col gap-4"
onSubmit={(event) => {
event.preventDefault();
handleSubmit();
}}
>
<textarea
ref={textareaRef}
value={value}
onChange={(event) => setValue(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
handleSubmit();
}
}}
disabled={isProcessing}
placeholder="State your decision or premise..."
rows={1}
className="w-full resize-none rounded-none border border-neutral-800 bg-black p-3 font-sans text-[16px] leading-relaxed text-[#EDEDED] outline-none transition-colors placeholder:text-neutral-600 disabled:opacity-60"
/>
<div className="flex justify-end">
<button
type="submit"
disabled={isProcessing}
className={`h-11 rounded-none border border-neutral-800 px-5 font-sans text-[14px] tracking-[0.2em] transition-colors ${
isProcessing
? "cursor-not-allowed bg-neutral-950 text-neutral-600"
: "bg-black text-[#EDEDED] hover:bg-neutral-900"
}`}
>
[ SUBMIT ]
</button>
</div>
</form>
</div>
);
}
|