salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nbcvhc

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-13 13:43:55 +00:00
parent ad895fcb3a
commit db1fd2fff8
4 changed files with 175 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/ui/pricing-table/PricingTable.tsx
View File

@@ -92,41 +92,60 @@ export default function PricingTable({
return (
<div className={`space-y-6 ${className}`}>
{title && (
<div className="mx-auto w-full max-w-[385px]">
<h2 className="font-bold text-center text-gray-800 mb-7 text-title-sm dark:text-white/90">
<div className="mx-auto w-full">
<h2 className="font-bold text-center text-gray-800 text-2xl mb-5 dark:text-white/90">
{title}
</h2>
</div>
)}
{showToggle && (
<div className="mb-10 text-center">
<div className="relative inline-flex p-1 mx-auto bg-gray-200 rounded-full z-1 dark:bg-gray-800">
<div className="mb-8 text-center">
<div className="relative inline-flex p-1 bg-gray-200 rounded-full dark:bg-gray-800 shadow-sm">
<span
className={`absolute top-1/2 -z-1 flex h-11 w-[120px] -translate-y-1/2 rounded-full bg-white shadow-theme-xs duration-200 ease-linear dark:bg-white/10 ${
billingPeriod === 'monthly' ? 'translate-x-0' : 'translate-x-[120px]'
}`}
className="absolute top-1 left-1 flex h-11 w-[130px] rounded-full shadow-theme-xs duration-200 ease-linear"
style={{
background: 'linear-gradient(to bottom right, #0693e3, #0472b8)',
transform: billingPeriod === 'monthly' ? 'translateX(0)' : 'translateX(130px)',
}}
></span>
<button
type="button"
onClick={() => setBillingPeriod('monthly')}
className={`flex h-11 w-[120px] items-center justify-center text-base font-medium transition-colors ${
className={`relative z-10 flex h-11 w-[130px] items-center justify-center font-medium transition-all duration-200 rounded-full ${
billingPeriod === 'monthly'
? 'text-gray-800 dark:text-white/90'
? 'text-white'
: 'text-gray-500 hover:text-gray-700 dark:hover:text-white/80 dark:text-gray-400'
}`}
>
Monthly
</button>
<button
type="button"
onClick={() => setBillingPeriod('annually')}
className={`flex h-11 w-[120px] items-center justify-center text-base font-medium transition-colors ${
className={`relative z-10 flex h-11 w-[130px] items-center justify-center font-medium transition-all duration-200 rounded-full ${
billingPeriod === 'annually'
? 'text-gray-800 dark:text-white/90'
? 'text-white'
: 'text-gray-500 hover:text-gray-700 dark:hover:text-white/80 dark:text-gray-400'
}`}
>
Annually
</button>
</div>
{billingPeriod === 'annually' && (
<div className="flex items-center justify-center mt-3">
<span className="inline-flex items-center gap-1.5 text-green-600 dark:text-green-400 font-semibold bg-green-50 dark:bg-green-900/20 px-3 py-1.5 rounded-full text-sm">
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
Save 15% with annual billing
</span>
</div>
)}
</div>
)}
<div className="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:gap-6">
@@ -218,7 +237,7 @@ export default function PricingTable({
: 'bg-gray-800 hover:bg-brand-500 dark:bg-white/10 dark:hover:bg-brand-600'
} ${plan.disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
>
{plan.buttonText || 'Choose Plan'}
{plan.buttonText || (plan.price === 0 || plan.monthlyPrice === 0 ? 'Start Free' : 'Choose Plan')}
</button>
</div>
);