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

34
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">
<DialogHeader>
<DialogTitle>Konfirmasi Selesai Asesmen</DialogTitle>
<DialogDescription>
Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan. Apakah Anda yakin ingin mengakhiri assessment ini? Pastikan semua jawaban sudah lengkap sebelum melanjutkan. Jika Anda sudah siap, klik 'Ya' untuk menyelesaikan.
</Text> </DialogDescription>
<Flex gap="sm" justify="flex-end" mt="md"> </DialogHeader>
<DialogFooter className="flex justify-end gap-2">
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
Tidak Tidak
</Button> </Button>
<Button <Button onClick={() => onConfirm(assessmentId)}>Ya</Button>
onClick={() => { </DialogFooter>
onConfirm(assessmentId); </DialogContent>
}} </Dialog>
>
Ya
</Button>
</Flex>
</Modal>
); );
} }

29
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.
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex justify-end gap-2">
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
Tutup Tutup
</Button> </Button>
</Flex> </DialogFooter>
</Modal> </DialogContent>
</Dialog>
); );
} }

29
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.
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex justify-end gap-2">
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
Tutup Tutup
</Button> </Button>
</Flex> </DialogFooter>
</Modal> </DialogContent>
</Dialog>
); );
} }