dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(pricing-plans): improve label class binding for payment frequency selection

Browse Source
This commit is contained in:
Andras Bacsai
2025-05-28 10:50:55 +02:00
parent 82529a3246
commit 15c1b76db5
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/views/livewire/subscription/pricing-plans.blade.php
View File

@@ -4,17 +4,22 @@
<fieldset <fieldset
class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5"> class="grid grid-cols-2 p-1 text-xs font-semibold leading-5 text-center rounded-sm dark:text-white gap-x-1 dark:bg-white/5 bg-black/5">
<legend class="sr-only">Payment frequency</legend> <legend class="sr-only">Payment frequency</legend>
<label class="cursor-pointer rounded-sm px-2.5 py-1" <label
:class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''"> :class="selected === 'monthly' ?
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
'cursor-pointer rounded-sm px-2.5 py-1'">
<input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly" <input type="radio" x-on:click="selected = 'monthly'" name="frequency" value="monthly"
class="sr-only"> class="sr-only">
<span>Monthly</span> <span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
</label> </label>
<label class="cursor-pointer rounded-sm px-2.5 py-1" <label
:class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''"> :class="selected === 'yearly' ?
'dark:bg-coollabs-100 bg-warning dark:text-white cursor-pointer rounded-sm px-2.5 py-1' :
'cursor-pointer rounded-sm px-2.5 py-1'">
<input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually" <input type="radio" x-on:click="selected = 'yearly'" name="frequency" value="annually"
class="sr-only"> class="sr-only">
<span>Annually <span class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span> <span :class="selected === 'yearly' ? 'dark:text-white' : ''">Annually <span
class="text-xs dark:text-warning text-coollabs">(save ~20%)</span></span>
</label> </label>
</fieldset> </fieldset>
</div> </div>