72 lines
2.8 KiB
JavaScript
72 lines
2.8 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Plus, Mic, ArrowUp, ChevronDown, BarChart3, Search, FileText } from "lucide-react";
|
|
|
|
const QUICK_ACTIONS = [
|
|
{ icon: BarChart3, label: "Analyze my week" },
|
|
{ icon: FileText, label: "Draft a briefing" },
|
|
{ icon: Search, label: "Look something up" },
|
|
];
|
|
|
|
export default function KrowCommandAsk({ onSubmit, onQuickAction }) {
|
|
const [input, setInput] = useState("");
|
|
|
|
const handleSubmit = (e) => {
|
|
e?.preventDefault();
|
|
const text = input.trim();
|
|
if (!text) return;
|
|
onSubmit(text);
|
|
setInput("");
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-[70vh] flex flex-col items-center justify-center bg-black px-4 -mx-6 -my-6">
|
|
<div className="w-full max-w-2xl flex flex-col items-center">
|
|
<h1 className="text-2xl md:text-3xl font-semibold text-white mb-8 text-center">
|
|
Ask KROW
|
|
</h1>
|
|
|
|
<form onSubmit={handleSubmit} className="w-full">
|
|
<div className="flex items-center gap-2 bg-[#212121] rounded-full pl-4 pr-2 py-2 border border-white/10 focus-within:border-white/25 transition-colors">
|
|
<Plus className="w-5 h-5 text-[#8E8E8E] flex-shrink-0" />
|
|
<input
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
placeholder="Ask KROW"
|
|
className="flex-1 bg-transparent text-white placeholder:text-[#8E8E8E] text-sm outline-none min-w-0"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-1 text-xs text-[#D1D1D1] hover:text-white px-2 py-1 rounded-full hover:bg-white/5 transition-colors"
|
|
>
|
|
Instant
|
|
<ChevronDown className="w-3 h-3" />
|
|
</button>
|
|
<button type="button" className="text-[#8E8E8E] hover:text-white p-1.5 transition-colors">
|
|
<Mic className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={!input.trim()}
|
|
className="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed hover:bg-white/90 transition-colors flex-shrink-0"
|
|
>
|
|
<ArrowUp className="w-4 h-4" strokeWidth={2.5} />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div className="mt-6 w-full flex flex-col items-start gap-1 pl-2">
|
|
{QUICK_ACTIONS.map((action, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => onQuickAction(action.label)}
|
|
className="flex items-center gap-3 px-2 py-2 text-sm text-[#D1D1D1] hover:text-white transition-colors"
|
|
>
|
|
<action.icon className="w-4 h-4" strokeWidth={1.5} />
|
|
{action.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |