124 lines
3.4 KiB
TypeScript
124 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Upload } from "lucide-react";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { createPromotion } from "@/service/promotion";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import Swal from "sweetalert2";
|
|
|
|
export default function AddPromoForm() {
|
|
const router = useRouter();
|
|
|
|
const [title, setTitle] = useState("");
|
|
const [file, setFile] = useState<File | null>(null);
|
|
|
|
const MySwal = withReactContent(Swal);
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selected = e.target.files?.[0];
|
|
if (selected) {
|
|
setFile(selected);
|
|
}
|
|
};
|
|
|
|
const onSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!file) {
|
|
alert("File wajib diupload!");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
|
|
formData.append("title", title);
|
|
formData.append("description", title);
|
|
formData.append("file", file);
|
|
|
|
await createPromotion(formData);
|
|
|
|
successSubmit("/admin/promotion");
|
|
} catch (err) {
|
|
console.error("ERROR CREATE PROMO:", err);
|
|
}
|
|
};
|
|
|
|
function successSubmit(redirect: string) {
|
|
MySwal.fire({
|
|
title: "Sukses",
|
|
icon: "success",
|
|
confirmButtonColor: "#3085d6",
|
|
confirmButtonText: "OK",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
router.push(redirect);
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full max-w-full mx-auto shadow-md border-none p-6">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl font-bold text-teal-900">
|
|
Form Tambah Promo
|
|
</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
<form className="space-y-6" onSubmit={onSubmit}>
|
|
<div>
|
|
<Label className="text-sm font-semibold">
|
|
Judul Promo <span className="text-red-500">*</span>
|
|
</Label>
|
|
<Input
|
|
placeholder="Masukkan Judul Promo"
|
|
className="mt-1"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-sm font-semibold">Upload File *</Label>
|
|
|
|
<label className="border-2 border-dashed rounded-lg flex flex-col items-center justify-center py-16 cursor-pointer hover:bg-gray-50 transition mt-2">
|
|
<Upload className="w-10 h-10 text-teal-800 mb-3" />
|
|
<p className="text-base text-gray-600 text-center">
|
|
Klik untuk upload atau drag & drop
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-1">PNG, JPG (max 2 MB)</p>
|
|
|
|
<input
|
|
type="file"
|
|
accept="image/png,image/jpeg"
|
|
className="hidden"
|
|
onChange={handleFileChange}
|
|
/>
|
|
</label>
|
|
|
|
{file && (
|
|
<p className="text-xs text-teal-800 mt-2 font-medium">
|
|
{file.name}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="bg-teal-800 hover:bg-teal-900 text-white px-8 py-6 text-lg mt-4"
|
|
>
|
|
Tambahkan Promo
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|