43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import CategoryForm from "./CategoryForm";
|
|
import type { Category } from "@/lib/categories";
|
|
|
|
type CategoryStepProps = {
|
|
category: Category;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
};
|
|
|
|
export default function CategoryStep({
|
|
category,
|
|
value,
|
|
onChange
|
|
}: CategoryStepProps) {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
|
|
{category.title}
|
|
</span>
|
|
<h2 className="text-2xl font-semibold text-slate-900 md:text-3xl">
|
|
{category.prompt}
|
|
</h2>
|
|
</div>
|
|
<div className="mt-4 flex items-start gap-3 rounded-2xl border border-amber-200/70 bg-amber-50/70 p-4 text-sm text-amber-900">
|
|
<span className="mt-1 inline-flex h-6 w-6 items-center justify-center rounded-full bg-amber-200/80 text-xs font-semibold text-amber-900">
|
|
D
|
|
</span>
|
|
<p>{category.tip}</p>
|
|
</div>
|
|
</div>
|
|
<CategoryForm
|
|
label={category.title}
|
|
helper={category.helper}
|
|
placeholder={category.placeholder}
|
|
value={value}
|
|
onChange={onChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|