[MVPTN] feat(dialog): Implementado formulário em dialog e confirmação de exclusão de registro
This commit is contained in:
parent
12a2c62af8
commit
02ae936c87
10 changed files with 699 additions and 41 deletions
75
package-lock.json
generated
75
package-lock.json
generated
|
|
@ -9,7 +9,9 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.2.1",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
|
|
@ -736,6 +738,34 @@
|
|||
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/react-alert-dialog": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
|
||||
"integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-dialog": "1.1.15",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-arrow": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
||||
|
|
@ -786,6 +816,36 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-checkbox": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
|
||||
"integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
|
||||
|
|
@ -1412,6 +1472,21 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-previous": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
|
||||
"integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.2.1",
|
||||
"@radix-ui/react-alert-dialog": "^1.1.15",
|
||||
"@radix-ui/react-avatar": "^1.1.10",
|
||||
"@radix-ui/react-checkbox": "^1.3.3",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
||||
|
|
|
|||
|
|
@ -1,37 +1,123 @@
|
|||
'use client'
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import { useTTBReconhecimentoTipoReadHooks } from "../../_hooks/useTTBReconhecimentoTipoReadHooks";
|
||||
import { useEffect } from "react";
|
||||
import ITTTBReconhecimentoTipo from '../../_interfaces/ITTTBReconhecimentoTipo'
|
||||
import Loading from "@/app/_components/loading/loading";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { useTTBReconhecimentoTipoReadHooks } from "../../_hooks/useTTBReconhecimentoTipoReadHooks"
|
||||
import { useEffect, useState } from "react"
|
||||
import ITTTBReconhecimentoTipo from "../../_interfaces/ITTTBReconhecimentoTipo"
|
||||
import Loading from "@/app/_components/loading/loading"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { useTTBReconhecimentoTipoSaveHooks } from "../../_hooks/useTTBReconhecimentoTipoSaveHooks"
|
||||
import { Controller, useForm } from "react-hook-form"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { TTBReconhecimentoTipoSchema } from "../../_schemas/TTTBReconhecimentoTipo"
|
||||
import z from "zod"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu"
|
||||
import { EllipsisIcon, PencilIcon, PlusIcon, Trash2 } from "lucide-react"
|
||||
|
||||
type FormValues = z.infer<typeof TTBReconhecimentoTipoSchema>
|
||||
|
||||
export default function TTBReconhecimentoTipoPage() {
|
||||
const { reconhecimentosTipos, fetchReconhecimentosTipos, addReconhecimentoTipo } = useTTBReconhecimentoTipoReadHooks()
|
||||
const { reconhecimentoTipo, saveReconhecimentoTipo } = useTTBReconhecimentoTipoSaveHooks()
|
||||
|
||||
const { reconhecimentosTipos, fetchReconhecimentosTipos } = useTTBReconhecimentoTipoReadHooks();
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingItem, setEditingItem] = useState<FormValues | null>(null);
|
||||
|
||||
const [alertDialogOpen, setAlertDialogOpen] = useState(false);
|
||||
const [item, setItem] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchReconhecimentosTipos();
|
||||
}, []);
|
||||
fetchReconhecimentosTipos()
|
||||
}, [])
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(TTBReconhecimentoTipoSchema),
|
||||
defaultValues: {
|
||||
tb_reconhecimentotipo_id: 0,
|
||||
descricao: "",
|
||||
situacao: "I",
|
||||
},
|
||||
})
|
||||
|
||||
async function onSubmit(values: FormValues) {
|
||||
const saved = await saveReconhecimentoTipo(values); // aguarda o retorno
|
||||
addReconhecimentoTipo(saved); // adiciona diretamente na lista
|
||||
|
||||
// reinicia o formulário para o estado original
|
||||
form.reset();
|
||||
}
|
||||
|
||||
async function openForm(values: FormValues) {
|
||||
setEditingItem(values); // guarda os valores do item
|
||||
setDialogOpen(true); // abre o Dialog
|
||||
form.reset({
|
||||
tb_reconhecimentotipo_id: values.tb_reconhecimentotipo_id,
|
||||
descricao: values.descricao,
|
||||
situacao: values.situacao,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
async function handlingConfirmation(visibility : boolean, item: null|any) {
|
||||
setAlertDialogOpen(visibility);
|
||||
setItem(item);
|
||||
}
|
||||
|
||||
const emptyForm: FormValues = {
|
||||
tb_reconhecimentotipo_id: 0,
|
||||
descricao: "",
|
||||
situacao: "I", // padrão Inativo
|
||||
};
|
||||
|
||||
if (!reconhecimentosTipos) return <Loading type={2} />
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
|
||||
<div className="flex mb-5">
|
||||
<div className="flex">
|
||||
<div className="w-64 flex-1">
|
||||
<div className="text-4xl font-semibold mb-1">
|
||||
Tipos de Reconhecimentos
|
||||
|
|
@ -40,14 +126,14 @@ export default function TTBReconhecimentoTipoPage() {
|
|||
Gerenciamento de tipos de reconhecimentos
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-64 flex-1 text-end">
|
||||
<Button className="cursor-pointer" asChild>
|
||||
<Link href={`/cadastros/reconhecimentos/formulario`}>
|
||||
+ Tipos
|
||||
</Link>
|
||||
<Button onClick={() => { openForm(emptyForm) }} className="cursor-pointer">
|
||||
<PlusIcon />Tipos
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent>
|
||||
<Table>
|
||||
|
|
@ -56,36 +142,148 @@ export default function TTBReconhecimentoTipoPage() {
|
|||
<TableHead className="w-[100px]">
|
||||
#
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
Descrição
|
||||
</TableHead>
|
||||
<TableHead>
|
||||
Situação
|
||||
</TableHead>
|
||||
<TableHead className="text-right">Amount</TableHead>
|
||||
<TableHead>
|
||||
Descrição
|
||||
</TableHead>
|
||||
<TableHead className="text-right"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{reconhecimentosTipos.map((reconhecimentosTipos: ITTTBReconhecimentoTipo) => (
|
||||
<TableRow key={reconhecimentosTipos.tb_reconhecimentotipo_id} className="cursor-pointer">
|
||||
<TableCell className="font-medium">
|
||||
{reconhecimentosTipos.tb_reconhecimentotipo_id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{reconhecimentosTipos.descricao}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{reconhecimentosTipos.tb_reconhecimentotipo_id}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">$250.00</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{reconhecimentosTipos.map(
|
||||
(item: ITTTBReconhecimentoTipo) => (
|
||||
<TableRow key={item.tb_reconhecimentotipo_id} className="cursor-pointer">
|
||||
<TableCell className="font-medium">
|
||||
{item.tb_reconhecimentotipo_id}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.situacao === 'A' ? (
|
||||
<span className="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300">
|
||||
Ativo
|
||||
</span>
|
||||
) : (
|
||||
<span className="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
Inativo
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{item.descricao}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="cursor-pointer">
|
||||
<EllipsisIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="left" align="start">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem className="cursor-pointer" onSelect={() => openForm(item)}>
|
||||
<PencilIcon /> Editar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="cursor-pointer" onSelect={() => handlingConfirmation(true, item)}>
|
||||
<Trash2 /> Remover
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
{/* Formulário dentro do Dialog */}
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-8"
|
||||
>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Tipos de Reconhecimentos</DialogTitle>
|
||||
<DialogDescription>
|
||||
Tipos de reconhecimentos são usados na tela de balcão
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="descricao"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Descrição</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Digite a descrição" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Controller
|
||||
name="situacao"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<Checkbox
|
||||
checked={field.value === "A"}
|
||||
onCheckedChange={(checked) => field.onChange(checked ? "A" : "I")}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label>
|
||||
Ativo
|
||||
</Label>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" type="button" className="cursor-pointer">
|
||||
Cancelar
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" className="cursor-pointer">
|
||||
Salvar
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
<input type="hidden" {...form.register("tb_reconhecimentotipo_id")} />
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</form>
|
||||
</Form>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog open={alertDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
#{item?.tb_reconhecimentotipo_id} - {item?.descricao}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação não pode ser desfeita. Isso excluirá permanentemente o registro e seus dados dos nossos servidores.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => handlingConfirmation(false, null)} className="cursor-pointer">
|
||||
Cancelar
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction className="cursor-pointer">
|
||||
Continuar
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import { faker } from "@faker-js/faker"
|
||||
|
||||
export default async function TTBReconhecimentoTipoSaveData(reconhecimentoTipo: any) {
|
||||
|
||||
return Promise.resolve({
|
||||
message: 'Dados salvos com sucesso',
|
||||
data: {
|
||||
tb_reconhecimentotipo_id: faker.number.int({ min: 1, max: 1000 }),
|
||||
descricao: reconhecimentoTipo.tb_reconhecimentotipo_id + reconhecimentoTipo.descricao,
|
||||
situacao: reconhecimentoTipo.situacao
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -21,6 +21,12 @@ export const useTTBReconhecimentoTipoReadHooks = () => {
|
|||
|
||||
}
|
||||
|
||||
return { reconhecimentosTipos, fetchReconhecimentosTipos }
|
||||
function addReconhecimentoTipo(reconhecimentoTipo: ITTTBReconhecimentoTipo) {
|
||||
|
||||
setReconhecimenntosTipos(prev => [...(prev || []), reconhecimentoTipo]);
|
||||
|
||||
}
|
||||
|
||||
return { reconhecimentosTipos, fetchReconhecimentosTipos, addReconhecimentoTipo }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
'use client'
|
||||
|
||||
import { useResponse } from "@/app/_response/ResponseContext"
|
||||
import { useState } from "react";
|
||||
import ITTTBReconhecimentoTipo from '../_interfaces/ITTTBReconhecimentoTipo'
|
||||
import TTBReconhecimentoTipoSaveData from "../_data/TTBReconhecimentoTipo/TTBReconhecimentoTipoSaveData";
|
||||
|
||||
export const useTTBReconhecimentoTipoSaveHooks = () => {
|
||||
|
||||
const { setResponse } = useResponse();
|
||||
|
||||
const [reconhecimentoTipo, setReconhcimentoTipo] = useState<ITTTBReconhecimentoTipo>();
|
||||
|
||||
const saveReconhecimentoTipo = async (reconhecimentoTipo: ITTTBReconhecimentoTipo) => {
|
||||
|
||||
const response = await TTBReconhecimentoTipoSaveData(reconhecimentoTipo);
|
||||
|
||||
setReconhcimentoTipo(response.data);
|
||||
|
||||
setResponse(response);
|
||||
|
||||
// Retorna os valores de forma imediata
|
||||
return response.data;
|
||||
|
||||
}
|
||||
|
||||
return { reconhecimentoTipo, saveReconhecimentoTipo }
|
||||
|
||||
}
|
||||
|
|
@ -3,5 +3,7 @@ import { z } from 'zod';
|
|||
export const TTBReconhecimentoTipoSchema = z.object({
|
||||
tb_reconhecimentotipo_id: z.number(),
|
||||
descricao: z.string().min(1),
|
||||
situacao: z.string().min(1),
|
||||
situacao: z.enum(["A", "I"], {
|
||||
errorMap: () => ({ message: "Situação deve ser 'A' ou 'I'" })
|
||||
}),
|
||||
});
|
||||
157
src/components/ui/alert-dialog.tsx
Normal file
157
src/components/ui/alert-dialog.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants } from "@/components/ui/button"
|
||||
|
||||
function AlertDialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Overlay
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
data-slot="alert-dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn("text-lg font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Action
|
||||
className={cn(buttonVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Cancel
|
||||
className={cn(buttonVariants({ variant: "outline" }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogPortal,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogTrigger,
|
||||
AlertDialogContent,
|
||||
AlertDialogHeader,
|
||||
AlertDialogFooter,
|
||||
AlertDialogTitle,
|
||||
AlertDialogDescription,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
}
|
||||
32
src/components/ui/checkbox.tsx
Normal file
32
src/components/ui/checkbox.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="flex items-center justify-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
143
src/components/ui/dialog.tsx
Normal file
143
src/components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue