@tthr/vue 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/nuxt/module.ts
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* ```
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
import { defineNuxtModule, addPlugin, createResolver, addImports } from '@nuxt/kit';
|
|
18
|
+
import { defineNuxtModule, addPlugin, createResolver, addImports, addComponent } from '@nuxt/kit';
|
|
19
19
|
|
|
20
20
|
export interface TetherModuleOptions {
|
|
21
21
|
/** Project ID from Tether dashboard */
|
|
@@ -66,5 +66,11 @@ export default defineNuxtModule<TetherModuleOptions>({
|
|
|
66
66
|
from: resolver.resolve('./runtime/composables'),
|
|
67
67
|
},
|
|
68
68
|
]);
|
|
69
|
+
|
|
70
|
+
// Auto-import components
|
|
71
|
+
addComponent({
|
|
72
|
+
name: 'TetherWelcome',
|
|
73
|
+
filePath: resolver.resolve('./runtime/components/TetherWelcome.vue'),
|
|
74
|
+
});
|
|
69
75
|
},
|
|
70
76
|
});
|
|
@@ -0,0 +1,467 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="tether-welcome">
|
|
3
|
+
<div class="tether-welcome__container">
|
|
4
|
+
<header class="tether-welcome__header">
|
|
5
|
+
<div class="tether-welcome__logo">
|
|
6
|
+
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
7
|
+
<rect width="40" height="40" rx="8" fill="currentColor" />
|
|
8
|
+
<path d="M12 14h16M20 14v14M14 28h12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
|
+
</svg>
|
|
10
|
+
</div>
|
|
11
|
+
<h1>Welcome to Tether</h1>
|
|
12
|
+
<p class="tether-welcome__subtitle">Realtime SQLite for modern apps</p>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<div class="tether-welcome__status">
|
|
16
|
+
<div class="tether-welcome__status-item" :class="{ 'tether-welcome__status-item--success': isConnected }">
|
|
17
|
+
<span class="tether-welcome__status-dot"></span>
|
|
18
|
+
<span>{{ isConnected ? 'Connected to Tether' : 'Connecting...' }}</span>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<section class="tether-welcome__demo">
|
|
23
|
+
<h2>Try it out</h2>
|
|
24
|
+
<p class="tether-welcome__demo-intro">Create posts in realtime. Open this page in multiple tabs to see live updates!</p>
|
|
25
|
+
|
|
26
|
+
<form class="tether-welcome__form" @submit.prevent="handleCreatePost">
|
|
27
|
+
<input
|
|
28
|
+
v-model="newPostTitle"
|
|
29
|
+
type="text"
|
|
30
|
+
placeholder="Enter a post title..."
|
|
31
|
+
class="tether-welcome__input"
|
|
32
|
+
:disabled="createPost.isPending.value"
|
|
33
|
+
/>
|
|
34
|
+
<button
|
|
35
|
+
type="submit"
|
|
36
|
+
class="tether-welcome__button"
|
|
37
|
+
:disabled="!newPostTitle.trim() || createPost.isPending.value"
|
|
38
|
+
>
|
|
39
|
+
{{ createPost.isPending.value ? 'Creating...' : 'Create Post' }}
|
|
40
|
+
</button>
|
|
41
|
+
</form>
|
|
42
|
+
|
|
43
|
+
<div v-if="posts.error.value" class="tether-welcome__error">
|
|
44
|
+
{{ posts.error.value.message }}
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div class="tether-welcome__posts">
|
|
48
|
+
<div v-if="posts.isLoading.value" class="tether-welcome__loading">
|
|
49
|
+
Loading posts...
|
|
50
|
+
</div>
|
|
51
|
+
<template v-else-if="posts.data.value?.length">
|
|
52
|
+
<article
|
|
53
|
+
v-for="post in posts.data.value"
|
|
54
|
+
:key="post.id"
|
|
55
|
+
class="tether-welcome__post"
|
|
56
|
+
>
|
|
57
|
+
<div class="tether-welcome__post-content">
|
|
58
|
+
<h3>{{ post.title }}</h3>
|
|
59
|
+
<time>{{ formatDate(post.createdAt) }}</time>
|
|
60
|
+
</div>
|
|
61
|
+
<button
|
|
62
|
+
class="tether-welcome__post-delete"
|
|
63
|
+
@click="handleDeletePost(post.id)"
|
|
64
|
+
:disabled="deletePost.isPending.value"
|
|
65
|
+
title="Delete post"
|
|
66
|
+
>
|
|
67
|
+
<svg viewBox="0 0 20 20" fill="currentColor">
|
|
68
|
+
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
69
|
+
</svg>
|
|
70
|
+
</button>
|
|
71
|
+
</article>
|
|
72
|
+
</template>
|
|
73
|
+
<p v-else class="tether-welcome__empty">
|
|
74
|
+
No posts yet. Create your first one above!
|
|
75
|
+
</p>
|
|
76
|
+
</div>
|
|
77
|
+
</section>
|
|
78
|
+
|
|
79
|
+
<section class="tether-welcome__links">
|
|
80
|
+
<a href="https://tether.strands.gg/docs" target="_blank" rel="noopener" class="tether-welcome__link">
|
|
81
|
+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
82
|
+
<path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
83
|
+
</svg>
|
|
84
|
+
<span>Documentation</span>
|
|
85
|
+
</a>
|
|
86
|
+
<a href="https://github.com/StrandsServices/tether" target="_blank" rel="noopener" class="tether-welcome__link">
|
|
87
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
88
|
+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
89
|
+
</svg>
|
|
90
|
+
<span>GitHub</span>
|
|
91
|
+
</a>
|
|
92
|
+
<a href="https://discord.gg/strands" target="_blank" rel="noopener" class="tether-welcome__link">
|
|
93
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
94
|
+
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
|
|
95
|
+
</svg>
|
|
96
|
+
<span>Discord</span>
|
|
97
|
+
</a>
|
|
98
|
+
</section>
|
|
99
|
+
|
|
100
|
+
<footer class="tether-welcome__footer">
|
|
101
|
+
<p>Built with Tether by <a href="https://strands.gg" target="_blank" rel="noopener">Strands Services</a></p>
|
|
102
|
+
</footer>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</template>
|
|
106
|
+
|
|
107
|
+
<script setup lang="ts">
|
|
108
|
+
import { ref, onMounted } from 'vue';
|
|
109
|
+
import { useTether, useQuery, useMutation } from '../composables';
|
|
110
|
+
|
|
111
|
+
interface Post {
|
|
112
|
+
id: string;
|
|
113
|
+
title: string;
|
|
114
|
+
content: string;
|
|
115
|
+
authorId: string;
|
|
116
|
+
createdAt: string;
|
|
117
|
+
updatedAt: string;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
const isConnected = ref(false);
|
|
121
|
+
const newPostTitle = ref('');
|
|
122
|
+
|
|
123
|
+
// Set up queries and mutations
|
|
124
|
+
const posts = useQuery<void, Post[]>({ _name: 'posts.list' });
|
|
125
|
+
const createPost = useMutation<{ title: string; content?: string }, { id: string }>({ _name: 'posts.create' });
|
|
126
|
+
const deletePost = useMutation<{ id: string }, void>({ _name: 'posts.remove' });
|
|
127
|
+
|
|
128
|
+
onMounted(async () => {
|
|
129
|
+
try {
|
|
130
|
+
const client = useTether();
|
|
131
|
+
await client.connect();
|
|
132
|
+
isConnected.value = true;
|
|
133
|
+
} catch {
|
|
134
|
+
// Connection handled by client
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
async function handleCreatePost() {
|
|
139
|
+
if (!newPostTitle.value.trim()) return;
|
|
140
|
+
|
|
141
|
+
try {
|
|
142
|
+
await createPost.mutate({
|
|
143
|
+
title: newPostTitle.value.trim(),
|
|
144
|
+
content: '',
|
|
145
|
+
});
|
|
146
|
+
newPostTitle.value = '';
|
|
147
|
+
await posts.refetch();
|
|
148
|
+
} catch (error) {
|
|
149
|
+
console.error('Failed to create post:', error);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
async function handleDeletePost(id: string) {
|
|
154
|
+
try {
|
|
155
|
+
await deletePost.mutate({ id });
|
|
156
|
+
await posts.refetch();
|
|
157
|
+
} catch (error) {
|
|
158
|
+
console.error('Failed to delete post:', error);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
function formatDate(dateString: string): string {
|
|
163
|
+
const date = new Date(dateString);
|
|
164
|
+
return date.toLocaleDateString('en-GB', {
|
|
165
|
+
day: 'numeric',
|
|
166
|
+
month: 'short',
|
|
167
|
+
year: 'numeric',
|
|
168
|
+
hour: '2-digit',
|
|
169
|
+
minute: '2-digit',
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
</script>
|
|
173
|
+
|
|
174
|
+
<style scoped>
|
|
175
|
+
.tether-welcome {
|
|
176
|
+
min-height: 100vh;
|
|
177
|
+
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
|
|
178
|
+
color: #e4e4e7;
|
|
179
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
180
|
+
padding: 2rem;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.tether-welcome__container {
|
|
184
|
+
max-width: 640px;
|
|
185
|
+
margin: 0 auto;
|
|
186
|
+
display: flex;
|
|
187
|
+
flex-direction: column;
|
|
188
|
+
gap: 2.5rem;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.tether-welcome__header {
|
|
192
|
+
text-align: center;
|
|
193
|
+
display: flex;
|
|
194
|
+
flex-direction: column;
|
|
195
|
+
align-items: center;
|
|
196
|
+
gap: 1rem;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.tether-welcome__logo {
|
|
200
|
+
width: 64px;
|
|
201
|
+
height: 64px;
|
|
202
|
+
color: #6366f1;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.tether-welcome__header h1 {
|
|
206
|
+
font-size: 2.5rem;
|
|
207
|
+
font-weight: 700;
|
|
208
|
+
margin: 0;
|
|
209
|
+
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
|
210
|
+
-webkit-background-clip: text;
|
|
211
|
+
-webkit-text-fill-color: transparent;
|
|
212
|
+
background-clip: text;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.tether-welcome__subtitle {
|
|
216
|
+
color: #a1a1aa;
|
|
217
|
+
font-size: 1.125rem;
|
|
218
|
+
margin: 0;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.tether-welcome__status {
|
|
222
|
+
display: flex;
|
|
223
|
+
justify-content: center;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.tether-welcome__status-item {
|
|
227
|
+
display: flex;
|
|
228
|
+
align-items: center;
|
|
229
|
+
gap: 0.5rem;
|
|
230
|
+
padding: 0.5rem 1rem;
|
|
231
|
+
background: rgba(255, 255, 255, 0.05);
|
|
232
|
+
border-radius: 9999px;
|
|
233
|
+
font-size: 0.875rem;
|
|
234
|
+
color: #a1a1aa;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.tether-welcome__status-item--success {
|
|
238
|
+
color: #4ade80;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.tether-welcome__status-dot {
|
|
242
|
+
width: 8px;
|
|
243
|
+
height: 8px;
|
|
244
|
+
border-radius: 50%;
|
|
245
|
+
background: #a1a1aa;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.tether-welcome__status-item--success .tether-welcome__status-dot {
|
|
249
|
+
background: #4ade80;
|
|
250
|
+
box-shadow: 0 0 8px #4ade80;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.tether-welcome__demo {
|
|
254
|
+
background: rgba(255, 255, 255, 0.03);
|
|
255
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
256
|
+
border-radius: 1rem;
|
|
257
|
+
padding: 1.5rem;
|
|
258
|
+
display: flex;
|
|
259
|
+
flex-direction: column;
|
|
260
|
+
gap: 1rem;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.tether-welcome__demo h2 {
|
|
264
|
+
font-size: 1.25rem;
|
|
265
|
+
font-weight: 600;
|
|
266
|
+
margin: 0;
|
|
267
|
+
color: #f4f4f5;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.tether-welcome__demo-intro {
|
|
271
|
+
color: #a1a1aa;
|
|
272
|
+
font-size: 0.875rem;
|
|
273
|
+
margin: 0;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.tether-welcome__form {
|
|
277
|
+
display: flex;
|
|
278
|
+
gap: 0.75rem;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.tether-welcome__input {
|
|
282
|
+
flex: 1;
|
|
283
|
+
padding: 0.75rem 1rem;
|
|
284
|
+
background: rgba(0, 0, 0, 0.3);
|
|
285
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
286
|
+
border-radius: 0.5rem;
|
|
287
|
+
color: #e4e4e7;
|
|
288
|
+
font-size: 0.875rem;
|
|
289
|
+
outline: none;
|
|
290
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.tether-welcome__input:focus {
|
|
294
|
+
border-color: #6366f1;
|
|
295
|
+
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.tether-welcome__input::placeholder {
|
|
299
|
+
color: #71717a;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.tether-welcome__button {
|
|
303
|
+
padding: 0.75rem 1.5rem;
|
|
304
|
+
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
|
305
|
+
border: none;
|
|
306
|
+
border-radius: 0.5rem;
|
|
307
|
+
color: white;
|
|
308
|
+
font-size: 0.875rem;
|
|
309
|
+
font-weight: 500;
|
|
310
|
+
cursor: pointer;
|
|
311
|
+
transition: opacity 0.2s, transform 0.2s;
|
|
312
|
+
white-space: nowrap;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.tether-welcome__button:hover:not(:disabled) {
|
|
316
|
+
opacity: 0.9;
|
|
317
|
+
transform: translateY(-1px);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.tether-welcome__button:disabled {
|
|
321
|
+
opacity: 0.5;
|
|
322
|
+
cursor: not-allowed;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.tether-welcome__error {
|
|
326
|
+
padding: 0.75rem 1rem;
|
|
327
|
+
background: rgba(239, 68, 68, 0.1);
|
|
328
|
+
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
329
|
+
border-radius: 0.5rem;
|
|
330
|
+
color: #fca5a5;
|
|
331
|
+
font-size: 0.875rem;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.tether-welcome__posts {
|
|
335
|
+
display: flex;
|
|
336
|
+
flex-direction: column;
|
|
337
|
+
gap: 0.5rem;
|
|
338
|
+
min-height: 100px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.tether-welcome__loading,
|
|
342
|
+
.tether-welcome__empty {
|
|
343
|
+
color: #71717a;
|
|
344
|
+
font-size: 0.875rem;
|
|
345
|
+
text-align: center;
|
|
346
|
+
padding: 2rem;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.tether-welcome__post {
|
|
350
|
+
display: flex;
|
|
351
|
+
align-items: center;
|
|
352
|
+
justify-content: space-between;
|
|
353
|
+
gap: 1rem;
|
|
354
|
+
padding: 0.875rem 1rem;
|
|
355
|
+
background: rgba(0, 0, 0, 0.2);
|
|
356
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
357
|
+
border-radius: 0.5rem;
|
|
358
|
+
transition: background 0.2s;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
.tether-welcome__post:hover {
|
|
362
|
+
background: rgba(0, 0, 0, 0.3);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.tether-welcome__post-content {
|
|
366
|
+
flex: 1;
|
|
367
|
+
min-width: 0;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.tether-welcome__post-content h3 {
|
|
371
|
+
font-size: 0.9375rem;
|
|
372
|
+
font-weight: 500;
|
|
373
|
+
margin: 0 0 0.25rem 0;
|
|
374
|
+
color: #f4f4f5;
|
|
375
|
+
overflow: hidden;
|
|
376
|
+
text-overflow: ellipsis;
|
|
377
|
+
white-space: nowrap;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.tether-welcome__post-content time {
|
|
381
|
+
font-size: 0.75rem;
|
|
382
|
+
color: #71717a;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.tether-welcome__post-delete {
|
|
386
|
+
flex-shrink: 0;
|
|
387
|
+
width: 32px;
|
|
388
|
+
height: 32px;
|
|
389
|
+
display: flex;
|
|
390
|
+
align-items: center;
|
|
391
|
+
justify-content: center;
|
|
392
|
+
background: transparent;
|
|
393
|
+
border: none;
|
|
394
|
+
border-radius: 0.375rem;
|
|
395
|
+
color: #71717a;
|
|
396
|
+
cursor: pointer;
|
|
397
|
+
transition: color 0.2s, background 0.2s;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.tether-welcome__post-delete:hover:not(:disabled) {
|
|
401
|
+
color: #ef4444;
|
|
402
|
+
background: rgba(239, 68, 68, 0.1);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.tether-welcome__post-delete:disabled {
|
|
406
|
+
opacity: 0.5;
|
|
407
|
+
cursor: not-allowed;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.tether-welcome__post-delete svg {
|
|
411
|
+
width: 18px;
|
|
412
|
+
height: 18px;
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.tether-welcome__links {
|
|
416
|
+
display: flex;
|
|
417
|
+
justify-content: center;
|
|
418
|
+
gap: 1rem;
|
|
419
|
+
flex-wrap: wrap;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.tether-welcome__link {
|
|
423
|
+
display: flex;
|
|
424
|
+
align-items: center;
|
|
425
|
+
gap: 0.5rem;
|
|
426
|
+
padding: 0.625rem 1rem;
|
|
427
|
+
background: rgba(255, 255, 255, 0.05);
|
|
428
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
429
|
+
border-radius: 0.5rem;
|
|
430
|
+
color: #a1a1aa;
|
|
431
|
+
text-decoration: none;
|
|
432
|
+
font-size: 0.875rem;
|
|
433
|
+
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.tether-welcome__link:hover {
|
|
437
|
+
background: rgba(255, 255, 255, 0.08);
|
|
438
|
+
color: #e4e4e7;
|
|
439
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.tether-welcome__link svg {
|
|
443
|
+
width: 18px;
|
|
444
|
+
height: 18px;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.tether-welcome__footer {
|
|
448
|
+
text-align: center;
|
|
449
|
+
padding-top: 1rem;
|
|
450
|
+
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
.tether-welcome__footer p {
|
|
454
|
+
color: #52525b;
|
|
455
|
+
font-size: 0.8125rem;
|
|
456
|
+
margin: 0;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.tether-welcome__footer a {
|
|
460
|
+
color: #6366f1;
|
|
461
|
+
text-decoration: none;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.tether-welcome__footer a:hover {
|
|
465
|
+
text-decoration: underline;
|
|
466
|
+
}
|
|
467
|
+
</style>
|