Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 type Props = {
3 title?: string,
4 label: string,
5 showCheckmark?: boolean,
6 onclick: (e: Event) => void
7 }
8
9 let { title = undefined, label, showCheckmark = false, onclick }: Props = $props();
10</script>
11
12<li><a class="button" href="#" {onclick} {title}>
13 {#if showCheckmark} <span class="check">✓</span> {/if} {label}
14</a></li>
15
16<style>
17 li .button {
18 display: inline-block;
19 color: #333;
20 font-size: 11pt;
21 border: 1px solid #bbb;
22 padding: 3px 5px;
23 margin-top: 8px;
24 border-radius: 5px;
25 background-color: hsla(210, 100%, 4%, 0.12);
26 }
27
28 li .button:hover {
29 background-color: hsla(210, 100%, 4%, 0.2);
30 text-decoration: none;
31 }
32
33 @media (prefers-color-scheme: dark) {
34 li .button {
35 color: #333;
36 border-color: #bbb;
37 background-color: hsla(210, 100%, 4%, 0.12);
38 }
39
40 li .button:hover {
41 background-color: hsla(210, 100%, 4%, 0.2);
42 }
43 }
44</style>