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

feat: dark and light mdoe

Browse Source
This commit is contained in:
Amirmahdi
2026-06-06 15:33:01 +03:30
parent 07c93ceb91 99d29bbce5
commit f80fdd61ca
27 changed files with 594 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/promotions/PromotionForm.tsx
+37 -37
View File
@@ -122,9 +122,9 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{promotion ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'}
</h3>
</div>
@@ -132,7 +132,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نوع <span className="text-red-500">*</span>
</label>
<select
@@ -141,7 +141,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
required
value={formData.type || 'slider'}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
>
{Object.entries(PROMOTION_TYPES).map(([value, label]) => (
<option key={value} value={value}>
@@ -153,7 +153,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Title */}
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان
</label>
<input
@@ -162,14 +162,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="title"
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="عنوان تبلیغ"
/>
</div>
{/* Subtitle */}
<div className="md:col-span-2">
<label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
زیرعنوان
</label>
<input
@@ -178,14 +178,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="subtitle"
value={formData.subtitle || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="زیرعنوان تبلیغ"
/>
</div>
{/* Action Text */}
<div>
<label htmlFor="action_text" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="action_text" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
متن دکمه
</label>
<input
@@ -194,14 +194,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="action_text"
value={formData.action_text || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="مثال: همین حالا نصب کن"
/>
</div>
{/* Priority */}
<div>
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
اولویت
</label>
<input
@@ -211,14 +211,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
min="0"
value={formData.priority || 0}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="عدد بالاتر = اولویت بیشتر"
/>
</div>
{/* Start Date */}
<div>
<label htmlFor="start_at" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="start_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تاریخ شروع
</label>
<input
@@ -227,13 +227,13 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="start_at"
value={formData.start_at || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
/>
</div>
{/* End Date */}
<div>
<label htmlFor="end_at" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="end_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تاریخ پایان
</label>
<input
@@ -242,18 +242,18 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="end_at"
value={formData.end_at || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
/>
</div>
</div>
{/* URLs Section */}
<div className="border-t border-gray-200 pt-4">
<h4 className="text-md font-medium text-gray-900 mb-3">لینک‌ها</h4>
<div className="border-t border-gray-200 dark:border-gray-800 pt-4">
<h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">لینک‌ها</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{/* Myket URL */}
<div>
<label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک مایکت
</label>
<input
@@ -262,14 +262,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_myket"
value={formData.url_myket || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://myket.ir/app/..."
/>
</div>
{/* Bazaar URL */}
<div>
<label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک بازار
</label>
<input
@@ -278,14 +278,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_bazzar"
value={formData.url_bazzar || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://cafebazaar.ir/app/..."
/>
</div>
{/* Google Play URL */}
<div>
<label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک گوگل‌پلی
</label>
<input
@@ -294,14 +294,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_google_play"
value={formData.url_google_play || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://play.google.com/store/apps/..."
/>
</div>
{/* Site URL */}
<div>
<label htmlFor="url_site" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_site" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک وبسایت
</label>
<input
@@ -310,7 +310,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_site"
value={formData.url_site || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://example.com"
/>
</div>
@@ -319,12 +319,12 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Image Upload */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تصویر
</label>
<div className="flex items-center space-x-3 space-x-reverse">
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب تصویر
<input
type="file"
@@ -337,14 +337,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
<button
type="button"
onClick={removeImage}
className="text-red-600 hover:text-red-900"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
</button>
)}
</div>
{imagePreview && (
<div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200">
<div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
<img
src={imagePreview}
alt="Preview"
@@ -352,7 +352,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
/>
</div>
)}
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
حداکثر حجم: ۲ مگابایت
</p>
</div>
@@ -365,27 +365,27 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
id="is_active"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
/>
<label htmlFor="is_active" className="mr-2 block text-sm text-gray-900">
<label htmlFor="is_active" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
فعال
</label>
</div>
)}
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : promotion ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/promotions/PromotionList.tsx
+25 -25
View File
@@ -28,8 +28,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
if (!promotions || promotions.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ تبلیغاتی یافت نشد</p>
<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>
);
}
@@ -49,22 +49,22 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
};
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
لیست تبلیغات
</h3>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{sortedPromotions.map((promotion) => (
<li key={promotion.id} className="px-6 py-4 hover:bg-gray-50">
<li key={promotion.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-start space-x-4 space-x-reverse">
{/* Promotion Image - Using unoptimized Image component */}
{promotion.image_url && !imageErrors[promotion.id] && (
<div className="flex-shrink-0">
<div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200">
<div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
<Image
src={promotion.image_url}
alt={promotion.title || 'Promotion'}
@@ -81,18 +81,18 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 space-x-reverse">
<p className="text-sm font-medium text-indigo-600">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
{promotion.title || 'بدون عنوان'}
</p>
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getPromotionTypeLabel(promotion.type)}
</span>
{promotion.is_active ? (
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
فعال
</span>
) : (
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
غیرفعال
</span>
)}
@@ -100,32 +100,32 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</div>
{promotion.subtitle && (
<p className="mt-1 text-sm text-gray-600">
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{promotion.subtitle}
</p>
)}
{promotion.action_text && (
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
متن دکمه: {promotion.action_text}
</p>
)}
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
{promotion.priority && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">اولویت:</span> {promotion.priority}
</div>
)}
{promotion.start_at && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">شروع:</span> {formatDate(promotion.start_at)}
</div>
)}
{promotion.end_at && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">پایان:</span> {formatDate(promotion.end_at)}
</div>
)}
@@ -134,28 +134,28 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
{/* URLs */}
<div className="mt-2 space-y-1">
{promotion.url_site && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">وبسایت:</span> {promotion.url_site}
</div>
)}
{promotion.url_myket && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">مایکت:</span> {promotion.url_myket}
</div>
)}
{promotion.url_bazzar && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">بازار:</span> {promotion.url_bazzar}
</div>
)}
{promotion.url_google_play && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">گوگل‌پلی:</span> {promotion.url_google_play}
</div>
)}
</div>
<div className="mt-2 text-xs text-gray-400">
<div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
آخرین به‌روزرسانی: {formatDate(promotion.updated_at)}
</div>
</div>
@@ -166,8 +166,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
<div className="mr-4 flex-shrink-0 flex flex-col space-y-2">
<button
onClick={() => onToggleActive(promotion)}
className={`p-2 rounded-full hover:bg-gray-100 ${
promotion.is_active ? 'text-green-600' : 'text-gray-400'
className={`p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
promotion.is_active ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'
}`}
title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
>
@@ -179,13 +179,13 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</button>
<button
onClick={() => onEdit(promotion)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(promotion)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>