51f90bf450
* fix(dashboard): make upgrade plan modal mobile responsive - Constrain modal height and enable scrolling on small screens - Anchor modal near top on mobile instead of vertical centering - Stack success-state buttons and use full-width cards in the grid - Reduce pricing card padding and adjust toggle badge on narrow viewports Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com> * chore(ui): regenerate output.css for pricing responsive classes Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
60 lines
1.8 KiB
Svelte
60 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { Badge } from '../../base/badge';
|
|
import { HoverableItem, PremiumIcon } from '../moving-icons';
|
|
|
|
interface Props {
|
|
isYearly?: boolean;
|
|
monthlyLabel?: string;
|
|
yearlyLabel?: string;
|
|
saveLabel?: string;
|
|
onToggle?: (isYearly: boolean) => void;
|
|
}
|
|
|
|
let {
|
|
isYearly = $bindable(false),
|
|
monthlyLabel = 'Monthly',
|
|
yearlyLabel = 'Annually',
|
|
saveLabel = 'Save 2 months',
|
|
onToggle
|
|
}: Props = $props();
|
|
|
|
function handleToggle(value: boolean) {
|
|
isYearly = value;
|
|
onToggle?.(value);
|
|
}
|
|
</script>
|
|
|
|
{#snippet period_button(isActive: boolean, isMonth: boolean)}
|
|
<button
|
|
type="button"
|
|
class="ui:cursor-pointer ui:rounded-full ui:px-3 ui:py-1 ui:text-sm ui:font-medium ui:transition-all ui:duration-500 ui:ease-in-out {isActive
|
|
? 'ui:bg-gray-200 ui:text-secondary-foreground'
|
|
: 'ui:text-muted-foreground ui:hover:text-accent-foreground'}"
|
|
onclick={() => handleToggle(isMonth ? false : true)}
|
|
>
|
|
{isMonth ? monthlyLabel : yearlyLabel}
|
|
</button>
|
|
{/snippet}
|
|
|
|
<div
|
|
class="ui:relative ui:z-10 ui:mx-auto ui:flex ui:w-fit ui:max-w-full ui:items-center ui:rounded-full ui:border ui:p-1 ui:bg-white ui:dark:bg-slate-950 ui:dark:border-slate-800"
|
|
>
|
|
{@render period_button(!isYearly, true)}
|
|
|
|
{@render period_button(isYearly, false)}
|
|
|
|
{#if saveLabel}
|
|
<HoverableItem>
|
|
{#snippet children(isHovered)}
|
|
<Badge
|
|
variant="default"
|
|
class="ui:absolute ui:-top-3 ui:right-0 ui:rotate-5 ui:shadow-2xl ui:bg-linear-to-r ui:from-pink-500 ui:to-orange-500 ui:px-2 ui:py-0.5 ui:sm:-right-4"
|
|
>
|
|
<PremiumIcon size={8} {isHovered} class="ui:text-white! ui:mr-1" />
|
|
<span class="ui:text-[10px] ui:font-bold ui:text-white">{saveLabel}</span>
|
|
</Badge>
|
|
{/snippet}
|
|
</HoverableItem>
|
|
{/if}
|
|
</div>
|