39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { montarPromptFinal, type PromptTemplate } from "@/lib/prompt-builder";
|
|
|
|
type PromptPreviewProps = {
|
|
answers: Record<string, string>;
|
|
template?: PromptTemplate;
|
|
};
|
|
|
|
export default function PromptPreview({
|
|
answers,
|
|
template
|
|
}: PromptPreviewProps) {
|
|
const preview = useMemo(
|
|
() => montarPromptFinal(answers, template),
|
|
[answers, template]
|
|
);
|
|
|
|
return (
|
|
<section className="rounded-3xl border border-slate-200/80 bg-white/95 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
|
|
<div className="flex flex-col gap-2">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
|
|
Preview em tempo real
|
|
</p>
|
|
<h2 className="text-2xl font-semibold text-slate-900">
|
|
Prompt final estruturado
|
|
</h2>
|
|
<p className="text-sm text-slate-600">
|
|
Ajuste as respostas e veja o prompt pronto para uso.
|
|
</p>
|
|
</div>
|
|
<div className="mt-5 rounded-2xl border border-slate-200 bg-slate-950/95 p-5 text-sm text-slate-100">
|
|
<pre className="whitespace-pre-wrap leading-relaxed">{preview}</pre>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|