157 lines
7.8 KiB
TypeScript
157 lines
7.8 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { Plus, X, Save, AlertCircle } from "lucide-react";
|
||
import { createPartnerAdmin } from "../../actions";
|
||
import { useRouter } from "next/navigation";
|
||
|
||
export default function AddPartnerModal() {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [errorMsg, setErrorMsg] = useState("");
|
||
const [name, setName] = useState("");
|
||
const [logo, setLogo] = useState<File | null>(null);
|
||
const [displayOrder, setDisplayOrder] = useState("0");
|
||
const router = useRouter();
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!logo) {
|
||
setErrorMsg("Lütfen bir logo görseli seçin.");
|
||
return;
|
||
}
|
||
|
||
setIsLoading(true);
|
||
setErrorMsg("");
|
||
|
||
const formData = new FormData();
|
||
formData.append("name", name);
|
||
formData.append("logo", logo);
|
||
formData.append("display_order", displayOrder);
|
||
|
||
const res = await createPartnerAdmin(formData);
|
||
setIsLoading(false);
|
||
|
||
if (res.error) {
|
||
setErrorMsg(res.error);
|
||
} else {
|
||
// Success
|
||
setIsOpen(false);
|
||
setName("");
|
||
setLogo(null);
|
||
setDisplayOrder("0");
|
||
router.refresh();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<button
|
||
onClick={() => setIsOpen(true)}
|
||
className="bg-primary text-white px-6 py-2 rounded-xl font-bold hover:bg-primary/80 transition-colors flex items-center gap-2 cursor-pointer"
|
||
>
|
||
<Plus className="w-4 h-4" />
|
||
Yeni Partner Ekle
|
||
</button>
|
||
|
||
{isOpen && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fadeIn">
|
||
<div className="relative w-full max-w-md bg-zinc-950 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
|
||
|
||
{/* Header */}
|
||
<div className="flex justify-between items-center pb-4 border-b border-white/10">
|
||
<h2 className="text-xl font-black uppercase tracking-widest text-white">Yeni Partner Ekle</h2>
|
||
<button
|
||
onClick={() => setIsOpen(false)}
|
||
className="text-white/40 hover:text-white transition-colors p-1"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Form */}
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Marka Adı</label>
|
||
<input
|
||
required
|
||
type="text"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
placeholder="Örn: ABC A.Ş."
|
||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Marka Logosu (Görsel Seçin)</label>
|
||
<div className="relative flex flex-col items-center justify-center border border-dashed border-white/10 hover:border-primary/50 transition-colors rounded-xl p-4 bg-white/5 cursor-pointer min-h-[100px]">
|
||
<input
|
||
required={!logo}
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={(e) => {
|
||
if (e.target.files && e.target.files[0]) {
|
||
setLogo(e.target.files[0]);
|
||
}
|
||
}}
|
||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||
/>
|
||
{logo ? (
|
||
<div className="text-center">
|
||
<p className="text-xs text-primary font-bold">{logo.name}</p>
|
||
<p className="text-[10px] text-white/40">{(logo.size / 1024).toFixed(1)} KB</p>
|
||
</div>
|
||
) : (
|
||
<div className="text-center space-y-1">
|
||
<p className="text-xs text-white/60 font-medium">Görsel seçmek için tıklayın</p>
|
||
<p className="text-[9px] text-white/30 uppercase tracking-wider">PNG, JPG veya SVG</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<label className="text-[10px] font-bold uppercase tracking-widest text-white/40 ml-1">Görünüm Sırası</label>
|
||
<input
|
||
required
|
||
type="number"
|
||
value={displayOrder}
|
||
onChange={(e) => setDisplayOrder(e.target.value)}
|
||
placeholder="0"
|
||
className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:border-primary outline-none"
|
||
/>
|
||
</div>
|
||
|
||
{errorMsg && (
|
||
<div className="flex items-center gap-2 text-red-500 text-xs font-bold bg-red-500/10 p-4 rounded-xl">
|
||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||
<span>{errorMsg}</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="pt-4 flex gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => setIsOpen(false)}
|
||
className="flex-1 border border-white/10 text-white font-bold py-3 px-6 rounded-xl hover:bg-white/5 transition-colors"
|
||
>
|
||
İptal
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading}
|
||
className="flex-1 bg-primary text-white font-bold py-3 px-6 rounded-xl hover:bg-primary/80 transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
|
||
>
|
||
<Save className="w-4 h-4" />
|
||
{isLoading ? "Kaydediliyor..." : "Kaydet"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|