feat: dark and light mdoe
This commit is contained in:
@@ -67,24 +67,24 @@ export default function UserProducts({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
|
||||
<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>
|
||||
|
||||
{/* Current Subscriptions grouped by package */}
|
||||
<div className="border-t border-gray-200">
|
||||
<div className="border-t border-gray-200 dark:border-gray-800">
|
||||
{Object.keys(productsByPackage).length > 0 ? (
|
||||
Object.entries(productsByPackage).map(([packageName, packageProducts]) => (
|
||||
<div key={packageName} className="border-b border-gray-200 last:border-b-0">
|
||||
<div className="bg-gray-50 px-4 py-2">
|
||||
<h4 className="text-sm font-medium text-gray-700">
|
||||
<div key={packageName} className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
|
||||
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-2">
|
||||
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
پکیج: {packageName}
|
||||
</h4>
|
||||
</div>
|
||||
<ul className="divide-y divide-gray-200">
|
||||
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
{packageProducts.map((product) => {
|
||||
const status = getSubscriptionStatus(product);
|
||||
const StatusIcon = status.icon;
|
||||
@@ -96,17 +96,17 @@ export default function UserProducts({
|
||||
<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 truncate">
|
||||
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
|
||||
{product.title || 'محصول'}
|
||||
</p>
|
||||
{subscriptionCount > 1 && (
|
||||
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
|
||||
<span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">
|
||||
{subscriptionCount} اشتراک
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mr-2 flex-shrink-0 flex">
|
||||
<p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
|
||||
<p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'}`}>
|
||||
<StatusIcon className={`h-4 w-4 ml-1 ${status.color}`} />
|
||||
{status.text}
|
||||
</p>
|
||||
@@ -114,23 +114,23 @@ export default function UserProducts({
|
||||
</div>
|
||||
<div className="mt-2 sm:flex sm:justify-between">
|
||||
<div className="sm:flex">
|
||||
<p className="flex items-center text-sm text-gray-500">
|
||||
<p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
|
||||
قیمت: {formatPrice(product.price)} تومان
|
||||
</p>
|
||||
<p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
|
||||
<p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
|
||||
نوع: {getProductTypeLabel(product.type)}
|
||||
</p>
|
||||
{product.pivot?.expire_at && (
|
||||
<p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
|
||||
<p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
|
||||
تاریخ انقضا: {formatDate(product.pivot.expire_at)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
|
||||
<div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
|
||||
<button
|
||||
onClick={() => onUnsubscribe(product.id)}
|
||||
disabled={isLoading}
|
||||
className="text-red-600 hover:text-red-900 disabled:opacity-50"
|
||||
className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
لغو اشتراک
|
||||
</button>
|
||||
@@ -145,7 +145,7 @@ export default function UserProducts({
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-5 sm:px-6 text-center text-gray-500">
|
||||
<div className="px-4 py-5 sm:px-6 text-center text-gray-500 dark:text-gray-400">
|
||||
کاربر هیچ اشتراکی ندارد
|
||||
</div>
|
||||
)}
|
||||
@@ -153,8 +153,8 @@ export default function UserProducts({
|
||||
|
||||
{/* Available Products for Subscription */}
|
||||
{availableProducts && availableProducts.length > 0 && selectedPackage && (
|
||||
<div className="border-t border-gray-200 px-4 py-5 sm:px-6">
|
||||
<h4 className="text-md font-medium text-gray-900 mb-3">
|
||||
<div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
|
||||
<h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">
|
||||
افزودن اشتراک جدید برای پکیج {selectedPackage}
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
@@ -166,22 +166,22 @@ export default function UserProducts({
|
||||
key={product.id}
|
||||
onClick={() => handleSubscribeClick(product.id)}
|
||||
disabled={isLoading}
|
||||
className="relative block w-full border-2 border-indigo-200 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||||
className="relative block w-full border-2 border-indigo-200 dark:border-indigo-900/60 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 dark:hover:border-indigo-500 dark:hover:bg-indigo-950/40 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
{product.title || 'محصول'}
|
||||
</p>
|
||||
{subscriptionCount > 0 && (
|
||||
<p className="mt-1 text-xs text-amber-600">
|
||||
<p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
|
||||
{subscriptionCount} اشتراک فعال دارد
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<PlusCircleIcon className="h-5 w-5 text-indigo-600" />
|
||||
<PlusCircleIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
برای افزودن اشتراک جدید کلیک کنید
|
||||
</p>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user