85 lines
3.8 KiB
TypeScript
85 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { PackageName } from '@/types/package';
|
|
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
|
import { formatDate } from '@/lib/utils';
|
|
|
|
interface PackageListProps {
|
|
packages: PackageName[];
|
|
onEdit: (pkg: PackageName) => void;
|
|
onDelete: (pkg: PackageName) => void;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export default function PackageList({ packages, onEdit, onDelete, isLoading }: PackageListProps) {
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex justify-center items-center py-12">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!packages || packages.length === 0) {
|
|
return (
|
|
<div className="text-center py-12 bg-white rounded-lg shadow">
|
|
<p className="text-gray-500">هیچ پکیجی یافت نشد</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
<ul className="divide-y divide-gray-200">
|
|
{packages.map((pkg) => (
|
|
<li key={pkg.id} className="px-2 py-4 hover:bg-gray-50">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center space-x-3 space-x-reverse">
|
|
{pkg.image && typeof pkg.image === 'string' && (
|
|
<img
|
|
src={pkg.image}
|
|
alt={pkg.title || ''}
|
|
className="h-10 w-10 rounded-full object-cover"
|
|
/>
|
|
)}
|
|
<div>
|
|
<p className="text-sm font-medium text-indigo-600 truncate px-2">
|
|
{pkg.title || 'بدون عنوان'}
|
|
</p>
|
|
<p className="text-sm text-gray-500 px-2">
|
|
{pkg.name || 'بدون نام'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 sm:flex sm:justify-between">
|
|
<div className="sm:flex sm:space-x-4 sm:space-x-reverse">
|
|
|
|
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-1 sm:mt-0">
|
|
آخرین بهروزرسانی: {formatDate(pkg.updated_at)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
|
|
<button
|
|
onClick={() => onEdit(pkg)}
|
|
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
|
|
>
|
|
<PencilIcon className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
onClick={() => onDelete(pkg)}
|
|
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
|
|
>
|
|
<TrashIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
} |