mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 09:09:39 +02:00
926ca231b5
- Add svelte-i18n configuration with SSR support to all web apps - Create LanguageSelector component for each app with brand colors - Add German and English locale files - Integrate language switcher into login pages via headerControls snippet - Fix Tailwind v4 @source directives for shared package scanning - Update AppSlider styling to match login container design Apps updated: - Memoro (gold #f8d62b) - Märchenzauber (pink #FF6B9D) - ManaDeck (purple #8b5cf6) - ManaCore (indigo #6366f1) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
38 lines
991 B
Svelte
38 lines
991 B
Svelte
<script lang="ts">
|
|
interface Props {
|
|
isOn: boolean;
|
|
onToggle: (value: boolean) => void;
|
|
disabled?: boolean;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
let { isOn = false, onToggle, disabled = false, size = 'md' }: Props = $props();
|
|
|
|
function handleToggle() {
|
|
if (!disabled) {
|
|
onToggle(!isOn);
|
|
}
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: { track: 'h-6 w-10', thumb: 'h-4 w-4 top-1 left-1', translate: 'translate-x-4' },
|
|
md: { track: 'h-8 w-14', thumb: 'h-6 w-6 top-1 left-1', translate: 'translate-x-6' }
|
|
};
|
|
</script>
|
|
|
|
<button
|
|
onclick={handleToggle}
|
|
class="relative {sizeClasses[size].track} flex-shrink-0 rounded-full transition-colors {isOn
|
|
? 'bg-primary'
|
|
: 'bg-menu'} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
|
|
role="switch"
|
|
aria-checked={isOn}
|
|
aria-label="Toggle"
|
|
{disabled}
|
|
>
|
|
<span
|
|
class="absolute {sizeClasses[size].thumb} rounded-full bg-white shadow-md transition-transform {isOn
|
|
? sizeClasses[size].translate
|
|
: 'translate-x-0'}"
|
|
></span>
|
|
</button>
|