Prompt Input Bar

1import { useState, useRef, useEffect } from "react";
2 
3export default function PromptInputBar() {
4  const [value, setValue] = useState("");
5  const textareaRef = useRef<HTMLTextAreaElement>(null);
6 
7  useEffect(() => {
8    const el = textareaRef.current;
9    if (el) {
10      el.style.height = "auto";
11      el.style.height = Math.min(el.scrollHeight, 200) + "px";
12    }
13  }, [value]);
14 
15  return (
16    <div className="flex min-h-screen items-end justify-center bg-[#09090b] p-8 pb-20">
17      <div className="w-full max-w-2xl">
18        <div className="rounded-xl border border-zinc-800 bg-[#111113] p-3 shadow-lg">
19          <textarea
20            ref={textareaRef}
21            value={value}
22            onChange={(e) => setValue(e.target.value)}
23            placeholder="Describe the component you want to build..."
24            rows={1}
25            className="w-full resize-none bg-transparent px-1 py-1 text-sm text-white placeholder-zinc-500 outline-none"
26          />
27          
28          {/* Toolbar */}
29          <div className="mt-2 flex items-center justify-between">
30            <div className="flex items-center gap-2">
31              {/* Attach */}
32              <button className="rounded-md p-1.5 text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300">
33                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
34                  <path strokeLinecap="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
35                </svg>
36              </button>
37              
38              {/* Model selector */}
39              <button className="flex items-center gap-1.5 rounded-md border border-zinc-700 px-2 py-1 text-xs text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-300">
40                <span className="h-1.5 w-1.5 rounded-full bg-orange-400" />
41                Claude Sonnet 4
42                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
43                  <path strokeLinecap="round" d="M19 9l-7 7-7-7" />
44                </svg>
45              </button>
46              
47              {/* Char count */}
48              <span className="text-[10px] tabular-nums text-zinc-600">{value.length}/4000</span>
49            </div>
50            
51            {/* Send */}
52            <button
53              disabled={!value.trim()}
54              className="flex items-center gap-1.5 rounded-lg bg-orange-500 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-orange-600 disabled:opacity-40 disabled:cursor-not-allowed"
55            >
56              Send
57              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
58                <path strokeLinecap="round" d="M5 12h14M12 5l7 7-7 7" />
59              </svg>
60            </button>
61          </div>
62        </div>
63        <p className="mt-2 text-center text-[10px] text-zinc-600">Cmd+Enter to send</p>
64      </div>
65    </div>
66  );
67}