this repo has no description
lewis.moe
1<script lang="ts">
2 import { _ } from '../lib/i18n'
3 import { getFullUrl } from '../lib/router.svelte'
4 import { routes } from '../lib/types/routes'
5
6 interface Props {
7 active: 'passkey' | 'password'
8 }
9
10 let { active }: Props = $props()
11</script>
12
13<div class="account-type-switcher">
14 <a href={getFullUrl(routes.register)} class="switcher-option" class:active={active === 'passkey'}>
15 {$_('register.passkeyAccount')}
16 </a>
17 <a href={getFullUrl(routes.registerPassword)} class="switcher-option" class:active={active === 'password'}>
18 {$_('register.passwordAccount')}
19 </a>
20</div>
21
22<style>
23 .account-type-switcher {
24 display: flex;
25 gap: var(--space-2);
26 padding: var(--space-1);
27 background: var(--bg-secondary);
28 border-radius: var(--radius-lg);
29 margin-bottom: var(--space-6);
30 }
31
32 .switcher-option {
33 flex: 1;
34 display: flex;
35 align-items: center;
36 justify-content: center;
37 gap: var(--space-2);
38 padding: var(--space-3) var(--space-4);
39 border-radius: var(--radius-md);
40 text-decoration: none;
41 color: var(--text-secondary);
42 font-weight: var(--font-medium);
43 transition: all 0.15s ease;
44 }
45
46 .switcher-option:hover {
47 color: var(--text-primary);
48 background: var(--bg-tertiary);
49 }
50
51 .switcher-option.active {
52 background: var(--bg-primary);
53 color: var(--text-primary);
54 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
55 }
56</style>