File size: 4,075 Bytes
dbeb485 2b62b0c 9205030 2b62b0c dbeb485 9205030 dbeb485 9205030 dbeb485 9205030 dbeb485 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import { useState } from "react";
import { Input } from "@pram/ui/components/input";
import { Button } from "@pram/ui/components/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@pram/ui/components/dialog";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
export function CreatePackageModal({
selectedCount,
onClose,
onCreate,
isPending,
examTypeName,
lowCount,
}: {
selectedCount: number;
onClose: () => void;
onCreate: (data: { title: string; description: string; isPublic: boolean }) => void;
isPending: boolean;
examTypeName: string;
lowCount: boolean;
}) {
const [title, setTitle] = useState(`${examTypeName} Bundle — ${selectedCount} Soal`);
const [description, setDescription] = useState("");
const [isPublic, setIsPublic] = useState(false);
return (
<Dialog open onOpenChange={(v) => !v && onClose()}>
<DialogContent className="max-w-lg">
<DialogHeader>
<DialogTitle className="text-2xl font-headline font-bold text-[var(--clay-black)]">
Buat Paket Soal
</DialogTitle>
</DialogHeader>
<div className="flex items-center gap-2 mb-4">
<span className="px-3 py-1 rounded-full bg-[var(--matcha-300)] text-[var(--matcha-800)] text-sm font-semibold">
{examTypeName}
</span>
<span className="text-sm text-[var(--warm-charcoal)]">
{selectedCount} soal
</span>
</div>
{lowCount && (
<div className="mb-4 p-3 rounded-[var(--radius-md)] bg-[var(--lemon-400)]/20 border-2 border-[var(--lemon-500)]/30 text-sm text-[var(--lemon-800)] flex items-start gap-2">
<MaterialIcon name="info" className="text-sm mt-0.5 shrink-0" />
<span>
Soal yang tersedia sedikit ({selectedCount} soal). Paket tetap bisa dibuat, tapi disarankan untuk menambah soal.
</span>
</div>
)}
<div className="space-y-4">
<div>
<label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
Judul Paket
</label>
<Input
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="e.g. IELTS Reading Bundle"
className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
/>
</div>
<div>
<label className="text-sm font-medium text-[var(--clay-black)] block mb-1">
Deskripsi
</label>
<Input
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Deskripsi singkat..."
className="rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] bg-[var(--pure-white)]"
/>
</div>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={isPublic}
onChange={(e) => setIsPublic(e.target.checked)}
className="w-4 h-4 rounded border-[var(--oat-border)]"
/>
<span className="text-sm text-[var(--warm-charcoal)]">
Publikasikan ke Bank Soal
</span>
</label>
</div>
<div className="mt-6 flex gap-3">
<Button
variant="outline"
onClick={onClose}
className="flex-1 rounded-[var(--radius-lg)] border-2 border-[var(--oat-border)] clay-hover"
>
Batal
</Button>
<Button
onClick={() => onCreate({ title, description, isPublic })}
disabled={!title || isPending}
className="flex-1 bg-[var(--clay-black)] text-[var(--pure-white)] hover:bg-[var(--warm-charcoal)] clay-hover rounded-[var(--radius-lg)]"
>
{isPending ? "Membuat..." : "Buat Paket"}
</Button>
</div>
</DialogContent>
</Dialog>
);
}
|