feat: add multi-user admin panel and featured partners toggle on home page
This commit is contained in:
AyrisAI
156
app/admin/(dashboard)/partners/AddPartnerModal.tsx
Normal file
156
app/admin/(dashboard)/partners/AddPartnerModal.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
"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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user