refactor(pricing-plans): improve label class binding for payment frequency selection
This commit is contained in:
		@@ -4,17 +4,22 @@
 | 
			
		||||
            <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">
 | 
			
		||||
                <legend class="sr-only">Payment frequency</legend>
 | 
			
		||||
                <label class="cursor-pointer rounded-sm px-2.5 py-1"
 | 
			
		||||
                    :class="selected === 'monthly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
 | 
			
		||||
                <label
 | 
			
		||||
                    :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"
 | 
			
		||||
                        class="sr-only">
 | 
			
		||||
                    <span>Monthly</span>
 | 
			
		||||
                    <span :class="selected === 'monthly' ? 'dark:text-white' : ''">Monthly</span>
 | 
			
		||||
                </label>
 | 
			
		||||
                <label class="cursor-pointer rounded-sm px-2.5 py-1"
 | 
			
		||||
                    :class="selected === 'yearly' ? 'dark:bg-coollabs-100 bg-warning dark:text-white' : ''">
 | 
			
		||||
                <label
 | 
			
		||||
                    :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"
 | 
			
		||||
                        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>
 | 
			
		||||
            </fieldset>
 | 
			
		||||
        </div>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user