91 lines
4.4 KiB
TypeScript
91 lines
4.4 KiB
TypeScript
import Link from "next/link";
|
|
import { salvarPerguntaAction } from "@/app/(admin)/admin/actions";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { listarPerguntasAdmin } from "@/lib/admin-service";
|
|
|
|
export default async function PerguntasAdminPage() {
|
|
const secoes = await listarPerguntasAdmin();
|
|
|
|
return (
|
|
<main className="container py-8">
|
|
<div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-semibold">Perguntas e ajudas</h1>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
Edite textos do briefing sem alterar codigo.
|
|
</p>
|
|
</div>
|
|
<Button asChild variant="outline">
|
|
<Link href="/admin">Voltar</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{secoes.map((secao) => (
|
|
<Card key={secao.id}>
|
|
<CardHeader>
|
|
<CardTitle>{secao.ordem}. {secao.titulo}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{secao.perguntas.map((pergunta) => (
|
|
<form key={pergunta.id} action={salvarPerguntaAction} className="space-y-4 rounded-lg border p-4">
|
|
<input type="hidden" name="perguntaId" value={pergunta.id} />
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="muted">{pergunta.tipo}</Badge>
|
|
{!pergunta.ativo ? <Badge variant="outline">Inativa</Badge> : null}
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-[100px_1fr]">
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`ordem-${pergunta.id}`}>Ordem</Label>
|
|
<Input id={`ordem-${pergunta.id}`} name="ordem" type="number" defaultValue={pergunta.ordem} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`rotulo-${pergunta.id}`}>Rotulo</Label>
|
|
<Input id={`rotulo-${pergunta.id}`} name="rotulo" defaultValue={pergunta.rotulo} />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`dica-${pergunta.id}`}>Dica</Label>
|
|
<Input id={`dica-${pergunta.id}`} name="dica" defaultValue={pergunta.dica ?? ""} />
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<label className="flex items-center gap-3 rounded-md border p-3 text-sm">
|
|
<Checkbox name="ativo" defaultChecked={pergunta.ativo} />
|
|
Ativa
|
|
</label>
|
|
<label className="flex items-center gap-3 rounded-md border p-3 text-sm">
|
|
<Checkbox name="obrigatoria" defaultChecked={pergunta.obrigatoria} />
|
|
Obrigatoria
|
|
</label>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`oq-${pergunta.id}`}>O que responder</Label>
|
|
<Textarea id={`oq-${pergunta.id}`} name="oQueResponder" defaultValue={pergunta.ajuda?.oQueResponder ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`pq-${pergunta.id}`}>Por que perguntamos</Label>
|
|
<Textarea id={`pq-${pergunta.id}`} name="porQuePerguntamos" defaultValue={pergunta.ajuda?.porQuePerguntamos ?? ""} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor={`ex-${pergunta.id}`}>Mini exemplo</Label>
|
|
<Textarea id={`ex-${pergunta.id}`} name="miniExemplo" defaultValue={pergunta.ajuda?.miniExemplo ?? ""} />
|
|
</div>
|
|
</div>
|
|
<Button type="submit">Salvar pergunta</Button>
|
|
</form>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|