152 lines
6.9 KiB
TypeScript
152 lines
6.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { Trash2, Save, Edit2, X, Star } from "lucide-react";
|
||
import { updatePartner, togglePartnerFeatured } from "../../actions";
|
||
import { useRouter } from "next/navigation";
|
||
import Image from "next/image";
|
||
|
||
export default function PartnerRow({ partner, onDelete }: { partner: any, onDelete: any }) {
|
||
const [isEditing, setIsEditing] = useState(false);
|
||
const [name, setName] = useState(partner.name);
|
||
const [displayOrder, setDisplayOrder] = useState(partner.display_order);
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
const [isFeatured, setIsFeatured] = useState(partner.is_featured);
|
||
const router = useRouter();
|
||
|
||
const handleSave = async () => {
|
||
setIsLoading(true);
|
||
const res = await updatePartner(partner.id, name, Number(displayOrder));
|
||
setIsLoading(false);
|
||
if (res.success) {
|
||
setIsEditing(false);
|
||
router.refresh();
|
||
} else {
|
||
alert("Güncellenirken bir hata oluştu");
|
||
}
|
||
};
|
||
|
||
const handleToggleFeatured = async () => {
|
||
const nextState = !isFeatured;
|
||
setIsFeatured(nextState);
|
||
const res = await togglePartnerFeatured(partner.id, nextState);
|
||
if (res.success) {
|
||
router.refresh();
|
||
} else {
|
||
setIsFeatured(!nextState);
|
||
alert("Öne çıkarma durumu güncellenemedi");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<tr className="hover:bg-white/[0.02] transition-colors border-b border-white/10 last:border-0">
|
||
<td className="px-6 py-4">
|
||
{isEditing ? (
|
||
<input
|
||
type="number"
|
||
value={displayOrder}
|
||
onChange={(e) => setDisplayOrder(e.target.value)}
|
||
className="w-16 bg-white/5 border border-white/10 rounded px-2 py-1 text-white focus:border-primary outline-none"
|
||
/>
|
||
) : (
|
||
<span className="font-bold text-white/40">{partner.display_order}</span>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<div className="flex items-center gap-4">
|
||
{/* Logo Preview */}
|
||
<div className="w-24 h-16 bg-white/5 border border-white/10 rounded-lg flex items-center justify-center overflow-hidden p-2 group relative">
|
||
{partner.logo ? (
|
||
<img
|
||
src={partner.logo}
|
||
alt={partner.name}
|
||
className="w-full h-full object-contain opacity-90 group-hover:opacity-100 transition-opacity transform scale-[4]"
|
||
/>
|
||
) : (
|
||
<span className="text-[10px] text-white/20">Logo Yok</span>
|
||
)}
|
||
</div>
|
||
{/* Tiny Path Info */}
|
||
<div className="hidden xl:block">
|
||
<div className="text-[10px] text-white/20 font-mono max-w-[200px] truncate">
|
||
{partner.logo}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
{isEditing ? (
|
||
<input
|
||
type="text"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
className="w-full max-w-md bg-white/5 border border-white/10 rounded px-3 py-1.5 text-white focus:border-primary outline-none"
|
||
/>
|
||
) : (
|
||
<div className="font-bold text-white tracking-wide">{partner.name}</div>
|
||
)}
|
||
</td>
|
||
<td className="px-6 py-4">
|
||
<button
|
||
onClick={handleToggleFeatured}
|
||
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold transition-all ${
|
||
isFeatured
|
||
? "bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20"
|
||
: "bg-white/5 text-white/20 hover:text-white/60 hover:bg-white/10"
|
||
}`}
|
||
>
|
||
<Star className={`w-4 h-4 ${isFeatured ? "fill-yellow-500" : ""}`} />
|
||
{isFeatured ? "Öne Çıkarıldı" : "Öne Çıkar"}
|
||
</button>
|
||
</td>
|
||
<td className="px-6 py-4 text-right">
|
||
<div className="flex justify-end items-center gap-2">
|
||
{isEditing ? (
|
||
<>
|
||
<button
|
||
onClick={handleSave}
|
||
disabled={isLoading}
|
||
className="p-2 bg-green-500/10 text-green-500 rounded-lg hover:bg-green-500 hover:text-white transition-all disabled:opacity-50"
|
||
title="Kaydet"
|
||
>
|
||
<Save className="w-4 h-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setIsEditing(false);
|
||
setName(partner.name);
|
||
setDisplayOrder(partner.display_order);
|
||
}}
|
||
className="p-2 bg-white/5 text-white/40 rounded-lg hover:bg-white/10 hover:text-white transition-all"
|
||
title="İptal"
|
||
>
|
||
<X className="w-4 h-4" />
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<button
|
||
onClick={() => setIsEditing(true)}
|
||
className="p-2 bg-white/5 text-white/40 rounded-lg hover:bg-primary hover:text-white transition-all"
|
||
title="Düzenle"
|
||
>
|
||
<Edit2 className="w-4 h-4" />
|
||
</button>
|
||
<form action={onDelete} className="inline">
|
||
<input type="hidden" name="id" value={partner.id} />
|
||
<button
|
||
type="submit"
|
||
className="p-2 bg-red-500/10 text-red-500 rounded-lg hover:bg-red-500 hover:text-white transition-all"
|
||
title="Sil"
|
||
>
|
||
<Trash2 className="w-4 h-4" />
|
||
</button>
|
||
</form>
|
||
</>
|
||
)}
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
);
|
||
}
|