126 lines
5.7 KiB
TypeScript
126 lines
5.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Trash2, Save, Edit2, X } from "lucide-react";
|
|
import { updatePartner } 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 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");
|
|
}
|
|
};
|
|
|
|
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 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>
|
|
);
|
|
}
|