Spaces:
Sleeping
Sleeping
File size: 2,827 Bytes
5456422 08b77b5 5456422 08b77b5 5456422 08b77b5 5456422 08b77b5 5456422 98ee05e 5456422 | 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 74 75 76 77 78 79 80 81 82 83 84 | import type { Brief } from "@/lib/types";
const FIELDS: { key: keyof Brief; label: string; placeholder: string }[] = [
{ key: "brand", label: "Brand", placeholder: "FitFuel" },
{ key: "product", label: "Product", placeholder: "High-protein meal replacement shake" },
{ key: "audience", label: "Audience", placeholder: "Busy professionals aged 25-40" },
{ key: "tone", label: "Tone", placeholder: "Energetic and no-nonsense" },
{ key: "goal", label: "Goal", placeholder: "Drive trial purchases" },
];
export function BriefForm({
brief,
onChange,
onSubmit,
loading,
statusText,
canSubmit,
}: {
brief: Brief;
onChange: (key: keyof Brief, value: string) => void;
onSubmit: () => void;
loading: boolean;
statusText: string;
canSubmit: boolean;
}) {
return (
<form
onSubmit={(e) => {
e.preventDefault();
onSubmit();
}}
className="border border-ink-700 bg-ink-900"
>
<div className="border-b border-ink-700 px-5 py-3">
<h2 className="font-mono text-xs uppercase tracking-wider text-zinc-400">
Brand Brief
</h2>
</div>
<div className="grid grid-cols-1 gap-4 px-5 py-5 sm:grid-cols-2">
{FIELDS.map((f) => (
<div
key={f.key}
className={f.key === "product" ? "sm:col-span-2" : undefined}
>
<label
htmlFor={f.key}
className="mb-1.5 block font-mono text-[11px] uppercase tracking-wider text-zinc-500"
>
{f.label}
</label>
<input
id={f.key}
type="text"
value={brief[f.key]}
placeholder={f.placeholder}
onChange={(e) => onChange(f.key, e.target.value)}
disabled={loading}
className="w-full border border-ink-700 bg-ink-950 px-3 py-2 text-sm text-zinc-100 outline-none transition-colors placeholder:text-zinc-600 focus:border-zinc-500 disabled:opacity-60"
/>
</div>
))}
</div>
<div className="flex items-center justify-between gap-4 border-t border-ink-700 px-5 py-4">
<p
className={`font-mono text-xs text-zinc-500 ${
loading ? "animate-soft-pulse" : ""
}`}
>
{loading ? statusText : canSubmit ? "Ready" : "Fill in the brief to generate"}
</p>
<button
type="submit"
disabled={loading || !canSubmit}
className="border border-zinc-300 bg-zinc-100 px-4 py-2 text-sm font-medium text-ink-950 transition-colors hover:bg-white disabled:cursor-not-allowed disabled:border-ink-600 disabled:bg-ink-700 disabled:text-zinc-400"
>
{loading ? "Running..." : "Generate Copy"}
</button>
</div>
</form>
);
}
|