Initial SeConectai briefing system
This commit is contained in:
@@ -0,0 +1,95 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
"use client";
|
||||
|
||||
import type { Anexo } from "@prisma/client";
|
||||
import { Download, FileUp, Trash2 } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { formatFileSize } from "@/lib/format";
|
||||
|
||||
type FormValues = {
|
||||
perguntas: Record<
|
||||
string,
|
||||
{
|
||||
texto?: string;
|
||||
selecionadas?: string[];
|
||||
complemento?: string;
|
||||
}
|
||||
>;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
briefingId: string;
|
||||
perguntaId: string;
|
||||
anexos: Pick<Anexo, "id" | "nomeOriginal" | "mime" | "tamanho">[];
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
export function AnexoField({ briefingId, perguntaId, anexos, readOnly = false }: Props) {
|
||||
const form = useFormContext<FormValues>();
|
||||
const [items, setItems] = useState(anexos);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const fieldName = `perguntas.${perguntaId}`;
|
||||
const selected = form.watch(`${fieldName}.selecionadas`) ?? [];
|
||||
const checked = selected.includes("Estou enviando este material");
|
||||
|
||||
async function uploadFile(file: File) {
|
||||
setUploading(true);
|
||||
setMessage(null);
|
||||
|
||||
const data = new FormData();
|
||||
data.append("file", file);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/briefings/${briefingId}/perguntas/${perguntaId}/anexos`, {
|
||||
method: "POST",
|
||||
body: data
|
||||
});
|
||||
const payload = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setMessage(payload.message ?? "Nao foi possivel enviar o arquivo.");
|
||||
return;
|
||||
}
|
||||
|
||||
setItems((current) => [payload.anexo, ...current]);
|
||||
setMessage("Arquivo enviado.");
|
||||
} finally {
|
||||
setUploading(false);
|
||||
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function removeFile(id: string) {
|
||||
setMessage(null);
|
||||
const response = await fetch(`/api/anexos/${id}`, { method: "DELETE" });
|
||||
const payload = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
setMessage(payload.message ?? "Nao foi possivel remover o arquivo.");
|
||||
return;
|
||||
}
|
||||
|
||||
setItems((current) => current.filter((item) => item.id !== id));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-start gap-3 rounded-md border p-3 text-sm leading-6">
|
||||
<Checkbox
|
||||
checked={checked}
|
||||
disabled={readOnly}
|
||||
onCheckedChange={(value) => {
|
||||
form.setValue(
|
||||
`${fieldName}.selecionadas`,
|
||||
value ? ["Estou enviando este material"] : [],
|
||||
{ shouldDirty: true }
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<span>Estou enviando este material</span>
|
||||
</label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`links-${perguntaId}`}>Links dos materiais</Label>
|
||||
<Textarea
|
||||
id={`links-${perguntaId}`}
|
||||
rows={4}
|
||||
disabled={readOnly}
|
||||
placeholder="Cole links do Drive, Dropbox, YouTube ou outros locais seguros."
|
||||
{...form.register(`${fieldName}.texto`)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border border-dashed bg-muted/40 p-4">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<FileUp className="h-5 w-5 text-primary" />
|
||||
<span>Envie arquivos relacionados a este item.</span>
|
||||
</div>
|
||||
{!readOnly ? (
|
||||
<Button type="button" variant="outline" disabled={uploading} onClick={() => fileInputRef.current?.click()}>
|
||||
{uploading ? "Enviando..." : "Selecionar arquivo"}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".png,.jpg,.jpeg,.webp,.svg,.pdf,.docx,.doc,.xlsx,.xls,.pptx,.zip,.mp4,.mov"
|
||||
className="hidden"
|
||||
disabled={readOnly}
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
|
||||
if (file) {
|
||||
void uploadFile(file);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<p className="mt-3 text-xs leading-5 text-muted-foreground">
|
||||
Nao envie senhas. Informe apenas provedores e responsaveis.
|
||||
</p>
|
||||
{uploading ? (
|
||||
<div className="mt-3 h-2 overflow-hidden rounded-full bg-muted">
|
||||
<div className="h-full w-2/3 animate-pulse rounded-full bg-primary" />
|
||||
</div>
|
||||
) : null}
|
||||
{message ? <p className="mt-3 text-sm text-muted-foreground">{message}</p> : null}
|
||||
</div>
|
||||
|
||||
{items.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{items.map((anexo) => (
|
||||
<div key={anexo.id} className="flex flex-col gap-3 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium">{anexo.nomeOriginal}</p>
|
||||
<p className="text-xs text-muted-foreground">{formatFileSize(anexo.tamanho)} | {anexo.mime}</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<a href={`/api/anexos/${anexo.id}`}>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
Baixar
|
||||
</a>
|
||||
</Button>
|
||||
{!readOnly ? (
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => removeFile(anexo.id)}>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Remover
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
"use client";
|
||||
|
||||
import type { Ajuda, Anexo, Pergunta, Resposta } from "@prisma/client";
|
||||
import { Controller, useFormContext } from "react-hook-form";
|
||||
import { AjudaButton } from "@/components/ajuda/AjudaButton";
|
||||
import { AnexoField } from "@/components/form/AnexoField";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
type PerguntaComAjuda = Pergunta & {
|
||||
ajuda: Ajuda | null;
|
||||
anexos?: Anexo[];
|
||||
respostas?: Resposta[];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
briefingId: string;
|
||||
pergunta: PerguntaComAjuda;
|
||||
index: number;
|
||||
readOnly?: boolean;
|
||||
};
|
||||
|
||||
type FormValues = {
|
||||
perguntas: Record<
|
||||
string,
|
||||
{
|
||||
texto?: string;
|
||||
selecionadas?: string[];
|
||||
complemento?: string;
|
||||
}
|
||||
>;
|
||||
};
|
||||
|
||||
function getOpcoes(pergunta: PerguntaComAjuda) {
|
||||
return Array.isArray(pergunta.opcoes)
|
||||
? pergunta.opcoes.filter((opcao): opcao is string => typeof opcao === "string")
|
||||
: [];
|
||||
}
|
||||
|
||||
export function PerguntaField({ briefingId, pergunta, index, readOnly = false }: Props) {
|
||||
const form = useFormContext<FormValues>();
|
||||
const fieldName = `perguntas.${pergunta.id}`;
|
||||
const opcoes = getOpcoes(pergunta);
|
||||
const texto = form.watch(`${fieldName}.texto`) ?? "";
|
||||
|
||||
return (
|
||||
<section className="rounded-lg border bg-card p-4 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="muted">{index + 1}</Badge>
|
||||
<Label className="text-base leading-6">{pergunta.rotulo}</Label>
|
||||
</div>
|
||||
{pergunta.dica ? <p className="text-sm leading-6 text-muted-foreground">{pergunta.dica}</p> : null}
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<AjudaButton
|
||||
rotulo={pergunta.rotulo}
|
||||
ajuda={pergunta.ajuda}
|
||||
allowTextShortcuts={pergunta.tipo === "TEXTAREA"}
|
||||
onUseShortcut={(value) =>
|
||||
form.setValue(`${fieldName}.texto`, value, { shouldDirty: true })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
{pergunta.tipo === "TEXTAREA" ? (
|
||||
<>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Nao se aplica", "A definir"].map((atalho) => (
|
||||
<button
|
||||
key={atalho}
|
||||
type="button"
|
||||
className="rounded-md border px-2.5 py-1 text-xs font-medium text-muted-foreground transition hover:bg-muted"
|
||||
onClick={() => form.setValue(`${fieldName}.texto`, atalho, { shouldDirty: true })}
|
||||
>
|
||||
{atalho}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Textarea {...form.register(`${fieldName}.texto`)} rows={5} />
|
||||
<p className="text-right text-xs text-muted-foreground">{String(texto).length} caracteres</p>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{pergunta.tipo === "RADIO" ? (
|
||||
<Controller
|
||||
control={form.control}
|
||||
name={`${fieldName}.selecionadas`}
|
||||
render={({ field }) => (
|
||||
<RadioGroup
|
||||
value={field.value?.[0] ?? ""}
|
||||
onValueChange={(value) => field.onChange(value ? [value] : [])}
|
||||
>
|
||||
{opcoes.map((opcao) => (
|
||||
<label key={opcao} className="flex items-center gap-3 rounded-md border p-3 text-sm">
|
||||
<RadioGroupItem value={opcao} />
|
||||
{opcao}
|
||||
</label>
|
||||
))}
|
||||
</RadioGroup>
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{pergunta.tipo === "CHECKBOX" ? (
|
||||
<Controller
|
||||
control={form.control}
|
||||
name={`${fieldName}.selecionadas`}
|
||||
render={({ field }) => {
|
||||
const selected = field.value ?? [];
|
||||
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
{opcoes.map((opcao) => (
|
||||
<label key={opcao} className="flex items-center gap-3 rounded-md border p-3 text-sm">
|
||||
<Checkbox
|
||||
checked={selected.includes(opcao)}
|
||||
onCheckedChange={(checked) => {
|
||||
field.onChange(
|
||||
checked ? [...selected, opcao] : selected.filter((value) => value !== opcao)
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{opcao}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{pergunta.tipo === "ANEXO" ? (
|
||||
<AnexoField
|
||||
briefingId={briefingId}
|
||||
perguntaId={pergunta.id}
|
||||
anexos={pergunta.anexos ?? []}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{pergunta.permiteComplemento ? (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`complemento-${pergunta.id}`}>Complemento / outro</Label>
|
||||
<Input id={`complemento-${pergunta.id}`} {...form.register(`${fieldName}.complemento`)} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import * as React from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const alertVariants = cva("relative w-full rounded-lg border p-4 text-sm", {
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
destructive: "border-destructive/50 text-destructive"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
});
|
||||
|
||||
const Alert = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||
>(({ className, variant, ...props }, ref) => (
|
||||
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
|
||||
));
|
||||
Alert.displayName = "Alert";
|
||||
|
||||
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-normal", className)} {...props} />
|
||||
)
|
||||
);
|
||||
AlertTitle.displayName = "AlertTitle";
|
||||
|
||||
const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
|
||||
)
|
||||
);
|
||||
AlertDescription.displayName = "AlertDescription";
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription };
|
||||
@@ -0,0 +1,30 @@
|
||||
import * as React from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border-transparent bg-primary text-primary-foreground",
|
||||
secondary: "border-transparent bg-secondary text-secondary-foreground",
|
||||
outline: "text-foreground",
|
||||
muted: "border-transparent bg-muted text-muted-foreground"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants };
|
||||
@@ -0,0 +1,52 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline"
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 px-3",
|
||||
lg: "h-11 px-6",
|
||||
icon: "h-10 w-10"
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default"
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
@@ -0,0 +1,40 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("rounded-lg border bg-card text-card-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
|
||||
)
|
||||
);
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn("text-2xl font-semibold leading-none tracking-normal", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
)
|
||||
);
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
export { Card, CardHeader, CardTitle, CardContent };
|
||||
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||
import { Check } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
));
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||
|
||||
export { Checkbox };
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { X } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Dialog = DialogPrimitive.Root;
|
||||
const DialogTrigger = DialogPrimitive.Trigger;
|
||||
const DialogPortal = DialogPrimitive.Portal;
|
||||
const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-1/2 top-1/2 z-50 grid max-h-[88vh] w-[calc(100vw-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-lg border bg-card p-6 text-card-foreground shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out sm:w-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Fechar</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn("flex flex-col space-y-2 text-left", className)} {...props} />
|
||||
);
|
||||
DialogHeader.displayName = "DialogHeader";
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props} />
|
||||
);
|
||||
DialogFooter.displayName = "DialogFooter";
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold leading-none tracking-normal", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm leading-6 text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription
|
||||
};
|
||||
@@ -0,0 +1,19 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
|
||||
({ className, type, ...props }, ref) => (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
|
||||
export { Input };
|
||||
@@ -0,0 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as LabelPrimitive from "@radix-ui/react-label";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const labelVariants = cva(
|
||||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
);
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
|
||||
));
|
||||
Label.displayName = LabelPrimitive.Root.displayName;
|
||||
|
||||
export { Label };
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Progress = React.forwardRef<
|
||||
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
||||
>(({ className, value, ...props }, ref) => (
|
||||
<ProgressPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className)}
|
||||
{...props}
|
||||
>
|
||||
<ProgressPrimitive.Indicator
|
||||
className="h-full w-full flex-1 bg-primary transition-transform"
|
||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||
/>
|
||||
</ProgressPrimitive.Root>
|
||||
));
|
||||
Progress.displayName = ProgressPrimitive.Root.displayName;
|
||||
|
||||
export { Progress };
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
||||
import { Circle } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const RadioGroup = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
|
||||
));
|
||||
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
||||
|
||||
const RadioGroupItem = React.forwardRef<
|
||||
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
||||
<Circle className="h-2.5 w-2.5 fill-current text-current" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
));
|
||||
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
||||
|
||||
export { RadioGroup, RadioGroupItem };
|
||||
@@ -0,0 +1,46 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
Table.displayName = "Table";
|
||||
|
||||
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
|
||||
({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
);
|
||||
TableHeader.displayName = "TableHeader";
|
||||
|
||||
const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
|
||||
)
|
||||
);
|
||||
TableBody.displayName = "TableBody";
|
||||
|
||||
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50", className)} {...props} />
|
||||
)
|
||||
);
|
||||
TableRow.displayName = "TableRow";
|
||||
|
||||
const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground", className)} {...props} />
|
||||
)
|
||||
);
|
||||
TableHead.displayName = "TableHead";
|
||||
|
||||
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<td ref={ref} className={cn("p-4 align-middle", className)} {...props} />
|
||||
)
|
||||
);
|
||||
TableCell.displayName = "TableCell";
|
||||
|
||||
export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };
|
||||
@@ -0,0 +1,18 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
Textarea.displayName = "Textarea";
|
||||
|
||||
export { Textarea };
|
||||
Reference in New Issue
Block a user