Amirmahdi/approagency-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redesign

Browse Source
This commit is contained in:
Amirmahdi
2026-07-10 16:01:27 +03:30
parent 05262b7636
commit a447222201
31 changed files with 1426 additions and 1738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/packages/PackageList.tsx
+34 -37
View File
@@ -3,6 +3,7 @@
import { PackageName } from '@/types/package';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { formatDate } from '@/lib/utils';
import Image from 'next/image';
interface PackageListProps {
packages: PackageName[];
@@ -14,66 +15,62 @@ interface PackageListProps {
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 className="flex justify-center items-center py-16">
<div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
</div>
);
}
if (!packages || packages.length === 0) {
return (
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد</p>
<div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
<div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
<svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
</svg>
</div>
<p className="text-gray-500 dark:text-gray-400 text-sm">هیچ پکیجی یافت نشد</p>
</div>
);
}
return (
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
<div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">لیست پکیج‌ها</h3>
</div>
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{packages.map((pkg) => (
<li key={pkg.id} className="px-2 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<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 dark:text-indigo-400 truncate px-2">
{pkg.title || 'بدون عنوان'}
</p>
<p className="text-sm text-gray-500 dark:text-gray-400 px-2">
{pkg.name || 'بدون نام'}
</p>
<li key={pkg.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
<div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-4 flex-1 min-w-0">
{pkg.image && typeof pkg.image === 'string' ? (
<div className="relative h-12 w-12 rounded-xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-800 flex-shrink-0">
<Image src={pkg.image} alt={pkg.title || ''} fill className="object-cover" unoptimized />
</div>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex sm:space-x-4 sm:space-x-reverse">
) : (
<div className="h-12 w-12 rounded-xl bg-indigo-100 dark:bg-indigo-500/10 flex items-center justify-center flex-shrink-0">
<span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">{(pkg.title || pkg.name || '?')[0]}</span>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 sm:mt-0">
آخرین به‌روزرسانی: {formatDate(pkg.updated_at)}
</p>
)}
<div className="min-w-0">
<p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400 truncate">{pkg.title || 'بدون عنوان'}</p>
<p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">{pkg.name || 'بدون نام'}</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">{formatDate(pkg.updated_at)}</p>
</div>
</div>
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<div className="flex items-center gap-1 flex-shrink-0">
<button
onClick={() => onEdit(pkg)}
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
>
<PencilIcon className="h-5 w-5" />
<PencilIcon className="h-4 w-4" />
</button>
<button
onClick={() => onDelete(pkg)}
className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
>
<TrashIcon className="h-5 w-5" />
<TrashIcon className="h-4 w-4" />
</button>
</div>
</div>
@@ -82,4 +79,4 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
</ul>
</div>
);
}
}