till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-22 05:06:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

refactor(packages): consolidate 2 subscription packages into @manacore/subscriptions

Browse source 
Merged shared-subscription-types + shared-subscription-ui into
@manacore/subscriptions. Updated imports in 15 web apps.

Package count: 49 → 47

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-28 17:40:47 +01:00
parent d70ab97a66
commit 1f3208384b
38 changed files with 115 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

151
packages/subscriptions/src/SubscriptionButton.svelte Normal file
View file

@ -0,0 +1,151 @@
<script lang="ts">
interface Props {
label: string;
onclick: () => void;
iconName?: string;
leftIconName?: string;
variant?: 'primary' | 'secondary' | 'accent';
disabled?: boolean;
}
let {
label,
onclick,
iconName = 'arrow-forward-outline',
leftIconName = 'cart-outline',
variant = 'primary',
disabled = false,
}: Props = $props();
// Icon mapping (simple SVG paths for common icons)
const iconPaths: Record<string, string> = {
'arrow-forward-outline': 'M5 12h14M12 5l7 7-7 7',
'checkmark-circle-outline': 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
'cart-outline':
'M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z',
};
</script>
<button
{disabled}
onclick={disabled ? undefined : onclick}
class="subscription-button"
class:subscription-button--primary={variant === 'primary'}
class:subscription-button--secondary={variant === 'secondary'}
class:subscription-button--accent={variant === 'accent'}
class:subscription-button--disabled={disabled}
>
<div class="subscription-button__content">
<svg
class="subscription-button__icon subscription-button__icon--left"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d={iconPaths[leftIconName] || iconPaths['cart-outline']} />
</svg>
<span>{label}</span>
</div>
<svg
class="subscription-button__icon subscription-button__icon--right"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d={iconPaths[iconName] || iconPaths['arrow-forward-outline']} />
</svg>
</button>
<style>
.subscription-button {
display: flex;
width: 100%;
height: 3rem;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
border-radius: 0.5rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.subscription-button--primary {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
color: hsl(var(--foreground));
}
:global(.dark) .subscription-button--primary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.subscription-button--primary:hover:not(.subscription-button--disabled) {
background: rgba(0, 0, 0, 0.08);
}
:global(.dark) .subscription-button--primary:hover:not(.subscription-button--disabled) {
background: rgba(255, 255, 255, 0.15);
}
.subscription-button--secondary {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.1);
color: hsl(var(--foreground));
}
:global(.dark) .subscription-button--secondary {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.subscription-button--secondary:hover:not(.subscription-button--disabled) {
background: rgba(255, 255, 255, 0.9);
}
:global(.dark) .subscription-button--secondary:hover:not(.subscription-button--disabled) {
background: rgba(255, 255, 255, 0.12);
}
.subscription-button--accent {
background: hsl(var(--primary, 221 83% 53%));
border: 1px solid hsl(var(--primary, 221 83% 53%));
color: white;
}
.subscription-button--accent:hover:not(.subscription-button--disabled) {
filter: brightness(1.1);
}
.subscription-button--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.subscription-button__content {
display: flex;
align-items: center;
justify-content: center;
}
.subscription-button__icon {
width: 1rem;
height: 1rem;
}
.subscription-button__icon--left {
margin-right: 0.5rem;
}
.subscription-button__icon--right {
margin-left: 0.5rem;
}
</style>