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 {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shadcn/components/ui/dialog";
interface FinishAssessmentModalProps {
assessmentId: string;
@ -15,22 +22,21 @@ export default function FinishAssessmentModal({
onConfirm,
}: FinishAssessmentModalProps) {
return (
<Modal opened={opened} onClose={onClose} title="Konfirmasi Selesai Asesmen">
<Text>
<Dialog open={opened} onOpenChange={onClose}>
<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.
</Text>
<Flex gap="sm" justify="flex-end" mt="md">
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex justify-end gap-2">
<Button variant="outline" onClick={onClose}>
Tidak
</Button>
<Button
onClick={() => {
onConfirm(assessmentId);
}}
>
Ya
</Button>
</Flex>
</Modal>
<Button onClick={() => onConfirm(assessmentId)}>Ya</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

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 {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shadcn/components/ui/dialog";
interface FileSizeValidationModalProps {
opened: boolean;
@ -13,16 +20,20 @@ export default function FileSizeValidationModal({
fileName,
}: FileSizeValidationModalProps) {
return (
<Modal opened={opened} onClose={onClose} title="Peringatan Ukuran File">
<Text>
Ukuran file {fileName} melebihi batas maksimum 25 MB!
Silakan pilih file yang lebih kecil.
</Text>
<Flex gap="sm" justify="flex-end" mt="md">
<Dialog open={opened} onOpenChange={onClose}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Peringatan Ukuran File</DialogTitle>
<DialogDescription>
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}>
Tutup
</Button>
</Flex>
</Modal>
</DialogFooter>
</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 {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/shadcn/components/ui/dialog";
interface ValidationModalProps {
opened: boolean;
@ -13,16 +20,20 @@ export default function ValidationModal({
unansweredQuestions,
}: ValidationModalProps) {
return (
<Modal opened={opened} onClose={onClose} title="Peringatan">
<Text>
Anda mempunyai {unansweredQuestions} pertanyaan yang belum terjawab!
Pastikan semua jawaban sudah lengkap sebelum melanjutkan.
</Text>
<Flex gap="sm" justify="flex-end" mt="md">
<Dialog open={opened} onOpenChange={onClose}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Peringatan</DialogTitle>
<DialogDescription>
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}>
Tutup
</Button>
</Flex>
</Modal>
</DialogFooter>
</DialogContent>
</Dialog>
);
}