gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: component modal using shadcn

Browse Source
This commit is contained in:
abiyasa05 2024-10-31 15:06:52 +07:00
parent 054fe2b7af
commit b52a07eb42
3 changed files with 70 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/frontend/src/modules/assessmentManagement/modals/ConfirmModal.tsx
View File

@ -1,5 +1,12 @@
import { Modal, Text, Flex } from "@mantine/core";
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shadcn/components/ui/dialog";
interface FinishAssessmentModalProps { interface FinishAssessmentModalProps {
assessmentId: string; assessmentId: string;
@ -15,22 +22,21 @@ export default function FinishAssessmentModal({
onConfirm, onConfirm,
}: FinishAssessmentModalProps) { }: FinishAssessmentModalProps) {
return ( return (
<Modal opened={opened} onClose={onClose} title="Konfirmasi Selesai Asesmen"> <Dialog open={opened} onOpenChange={onClose}>
<Text> <DialogContent className="max-w-md">
Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan. <DialogHeader>
</Text> <DialogTitle>Konfirmasi Selesai Asesmen</DialogTitle>
<Flex gap="sm" justify="flex-end" mt="md"> <DialogDescription>
<Button variant="outline" onClick={onClose}> Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan.
Tidak </DialogDescription>
</Button> </DialogHeader>
<Button <DialogFooter className="flex justify-end gap-2">
onClick={() => { <Button variant="outline" onClick={onClose}>
onConfirm(assessmentId); Tidak
}} </Button>
> <Button onClick={() => onConfirm(assessmentId)}>Ya</Button>
Ya </DialogFooter>
</Button> </DialogContent>
</Flex> </Dialog>
</Modal>
); );
} }

35
apps/frontend/src/modules/assessmentManagement/modals/FileSizeValidationModal.tsx
View File

@ -1,5 +1,12 @@
import { Modal, Text, Flex } from "@mantine/core";
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shadcn/components/ui/dialog";
interface FileSizeValidationModalProps { interface FileSizeValidationModalProps {
opened: boolean; opened: boolean;
@ -13,16 +20,20 @@ export default function FileSizeValidationModal({
fileName, fileName,
}: FileSizeValidationModalProps) { }: FileSizeValidationModalProps) {
return ( return (
<Modal opened={opened} onClose={onClose} title="Peringatan Ukuran File"> <Dialog open={opened} onOpenChange={onClose}>
<Text> <DialogContent className="max-w-md">
Ukuran file {fileName} melebihi batas maksimum 25 MB! <DialogHeader>
Silakan pilih file yang lebih kecil. <DialogTitle>Peringatan Ukuran File</DialogTitle>
</Text> <DialogDescription>
<Flex gap="sm" justify="flex-end" mt="md"> Ukuran file {fileName} melebihi batas maksimum 25 MB! Silakan pilih file yang lebih kecil.
<Button variant="outline" onClick={onClose}> </DialogDescription>
Tutup </DialogHeader>
</Button> <DialogFooter className="flex justify-end gap-2">
</Flex> <Button variant="outline" onClick={onClose}>
</Modal> Tutup
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }

35
apps/frontend/src/modules/assessmentManagement/modals/ValidationModal.tsx
View File

@ -1,5 +1,12 @@
import { Modal, Text, Flex } from "@mantine/core";
import { Button } from "@/shadcn/components/ui/button"; import { Button } from "@/shadcn/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shadcn/components/ui/dialog";
interface ValidationModalProps { interface ValidationModalProps {
opened: boolean; opened: boolean;
@ -13,16 +20,20 @@ export default function ValidationModal({
unansweredQuestions, unansweredQuestions,
}: ValidationModalProps) { }: ValidationModalProps) {
return ( return (
<Modal opened={opened} onClose={onClose} title="Peringatan"> <Dialog open={opened} onOpenChange={onClose}>
<Text> <DialogContent className="max-w-md">
Anda mempunyai {unansweredQuestions} pertanyaan yang belum terjawab! <DialogHeader>
Pastikan semua jawaban sudah lengkap sebelum melanjutkan. <DialogTitle>Peringatan</DialogTitle>
</Text> <DialogDescription>
<Flex gap="sm" justify="flex-end" mt="md"> Anda mempunyai {unansweredQuestions} pertanyaan yang belum terjawab! Pastikan semua jawaban sudah lengkap sebelum melanjutkan.
<Button variant="outline" onClick={onClose}> </DialogDescription>
Tutup </DialogHeader>
</Button> <DialogFooter className="flex justify-end gap-2">
</Flex> <Button variant="outline" onClick={onClose}>
</Modal> Tutup
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
); );
} }