113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
// components/TambahIklanModal.tsx
|
|
"use client";
|
|
|
|
import * as React from "react";
|
|
import {
|
|
Dialog,
|
|
DialogTrigger,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { CalendarIcon, Plus } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import DatePicker from "react-datepicker";
|
|
import { id } from "date-fns/locale";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
|
|
export function CalendarPolriAdd() {
|
|
const [open, setOpen] = React.useState(false);
|
|
const t = useTranslations("Schedule");
|
|
const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button onClick={() => setOpen(true)} color="primary" size="md">
|
|
<Plus className="mr-2 h-4 w-4" /> {t("calendar-polri")}{" "}
|
|
{t("schedule")}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent size="md">
|
|
<DialogHeader>
|
|
<DialogTitle>Buat Jadwal Kalender Polri</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="font-medium mb-1">Tanggal Acara</p>
|
|
<div className="relative">
|
|
<DatePicker
|
|
selected={eventDate}
|
|
onChange={(date) => setEventDate(date)}
|
|
dateFormat="dd MMMM yyyy"
|
|
locale={id}
|
|
className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<CalendarIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="font-medium">Publish Area</p>
|
|
<div className="flex flex-wrap gap-4 mt-2">
|
|
{["Semua", "Nasional", "Polda", "Satker", "International"].map(
|
|
(label) => (
|
|
<label key={label} className="flex items-center gap-2">
|
|
<Checkbox id={label} />
|
|
<span>{label}</span>
|
|
</label>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="font-medium">Nama Acara</p>
|
|
<Input placeholder="Masukkan nama acara" />
|
|
</div>
|
|
|
|
<div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
|
|
<svg
|
|
className="w-6 h-6 mb-2 text-blue-500"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
Drag your file(s) or{" "}
|
|
<span className="text-blue-500 underline cursor-pointer">
|
|
browse
|
|
</span>
|
|
</div>
|
|
<div className="text-xs mt-1">Max 10 MB files are allowed</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="font-medium">Deskripsi</p>
|
|
<Textarea placeholder="Masukkan deskripsi acara" rows={4} />
|
|
</div>
|
|
|
|
<div className="text-right">
|
|
<Button
|
|
type="submit"
|
|
className="bg-blue-600 text-white hover:bg-blue-700"
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|