109 lines
3.4 KiB
TypeScript
109 lines
3.4 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 { Plus } from "lucide-react";
|
|
|
|
export function TambahIklanModalUpdate() {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button onClick={() => setOpen(true)} color="primary" size="md">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Tambah Iklan
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent size="md">
|
|
<DialogHeader>
|
|
<DialogTitle>Tambah Iklan</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="font-medium">Target Area</p>
|
|
<div className="flex flex-wrap gap-4 mt-2">
|
|
{["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].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">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 Iklan</p>
|
|
<Input placeholder="Masukkan nama iklan" />
|
|
</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 iklan" rows={4} />
|
|
</div>
|
|
|
|
<div className="text-right">
|
|
<Button
|
|
type="submit"
|
|
className="bg-blue-600 text-white hover:bg-blue-700"
|
|
>
|
|
Tambah Iklan
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|