mary.my.id
Statusphere, but in atcute and SvelteKit
atproto
svelte
sveltekit
drizzle
atcute
typescript
1<script lang="ts">
2 import { doLogout } from '$lib/auth.remote';
3 import { getCurrentUser } from '$lib/status.remote';
4
5 const user = await getCurrentUser();
6</script>
7
8<header class="header">
9 <h1 class="title">statusphere</h1>
10
11 <div class="actions">
12 {#if user}
13 <span class="handle">@{user.handle}</span>
14 <form
15 {...doLogout.enhance(async ({ submit }) => {
16 await submit();
17 window.location.reload();
18 })}
19 >
20 <button type="submit" class="btn btn-ghost">sign out</button>
21 </form>
22 {:else}
23 <a href="/login" class="btn btn-primary">sign in</a>
24 {/if}
25 </div>
26</header>
27
28<style>
29 .header {
30 display: flex;
31 justify-content: space-between;
32 align-items: center;
33 margin-bottom: 1.5rem;
34 border-bottom: 1px solid var(--color-border);
35 padding-bottom: 1.5rem;
36 }
37
38 .title {
39 font-weight: 700;
40 font-size: 1.5rem;
41 }
42
43 .actions {
44 display: flex;
45 align-items: center;
46 gap: 0.75rem;
47 }
48
49 .handle {
50 color: var(--color-text-muted);
51 font-size: 0.875rem;
52 }
53
54 .btn {
55 display: inline-flex;
56 justify-content: center;
57 align-items: center;
58 transition:
59 background-color 0.15s,
60 border-color 0.15s;
61 cursor: pointer;
62 border: 1px solid transparent;
63 border-radius: var(--radius-md);
64 padding: 0.5rem 1rem;
65 font-weight: 500;
66 font-size: 0.875rem;
67 }
68
69 .btn:disabled {
70 opacity: 0.5;
71 cursor: not-allowed;
72 }
73
74 .btn-primary {
75 background-color: var(--color-accent);
76 color: white;
77 text-decoration: none;
78 }
79
80 .btn-primary:hover {
81 background-color: var(--color-accent-hover);
82 text-decoration: none;
83 }
84
85 .btn-ghost {
86 background-color: transparent;
87 color: var(--color-text-muted);
88 }
89
90 .btn-ghost:hover:not(:disabled) {
91 background-color: var(--color-bg-elevated);
92 color: var(--color-text);
93 }
94</style>