96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import type { Ajuda } from "@prisma/client";
|
|
import { useState } from "react";
|
|
import { HelpCircle } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger
|
|
} from "@/components/ui/dialog";
|
|
|
|
type Props = {
|
|
rotulo: string;
|
|
ajuda: Ajuda | null;
|
|
allowTextShortcuts?: boolean;
|
|
onUseShortcut?: (value: string) => void;
|
|
};
|
|
|
|
export function AjudaButton({ rotulo, ajuda, allowTextShortcuts = false, onUseShortcut }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
if (!ajuda) {
|
|
return null;
|
|
}
|
|
|
|
function useShortcut(value: string) {
|
|
onUseShortcut?.(value);
|
|
setOpen(false);
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 gap-1.5 px-2"
|
|
aria-label={`Ajuda sobre: ${rotulo}`}
|
|
>
|
|
<HelpCircle className="h-4 w-4" />
|
|
<span className="max-[360px]:hidden">Ajuda</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{rotulo}</DialogTitle>
|
|
<DialogDescription>
|
|
Use estas orientacoes para responder com mais seguranca.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-5">
|
|
<section className="space-y-2">
|
|
<h3 className="text-sm font-semibold">O que responder</h3>
|
|
<p className="text-sm leading-6 text-muted-foreground">{ajuda.oQueResponder}</p>
|
|
</section>
|
|
<section className="space-y-2">
|
|
<h3 className="text-sm font-semibold">Por que perguntamos</h3>
|
|
<p className="text-sm leading-6 text-muted-foreground">{ajuda.porQuePerguntamos}</p>
|
|
</section>
|
|
<section className="space-y-2 rounded-lg border bg-muted p-4">
|
|
<h3 className="text-sm font-semibold">Mini exemplo</h3>
|
|
<p className="text-sm leading-6 text-muted-foreground">{ajuda.miniExemplo}</p>
|
|
<p className="text-xs leading-5 text-muted-foreground">
|
|
Os exemplos servem apenas como referência. Substitua pelas informações reais da sua empresa.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
{allowTextShortcuts ? (
|
|
<>
|
|
<Button type="button" variant="outline" onClick={() => useShortcut("Nao se aplica")}>
|
|
Usar "Nao se aplica"
|
|
</Button>
|
|
<Button type="button" variant="outline" onClick={() => useShortcut("A definir")}>
|
|
Usar "A definir"
|
|
</Button>
|
|
</>
|
|
) : null}
|
|
<DialogClose asChild>
|
|
<Button type="button">Fechar</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|