Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 import type { LikeStat } from "../services/like_stats";
3
4 let { cssClass, header, users }: { cssClass: string, header: string, users: LikeStat[] } = $props();
5</script>
6
7<table class="scan-result {cssClass}" style="display: table;">
8 <thead>
9 <tr><th colspan="3">{header}</th></tr>
10 </thead>
11 <tbody>
12 {#each users as user, i}
13 <tr>
14 <td class="no">{i + 1}</td>
15 <td class="handle"><img class="avatar" alt="Avatar" src="{user.avatar}">
16 <a href="https://bsky.app/profile/{user.handle}" target="_blank">{user.handle}</a>
17 </td>
18 <td class="count">{user.count}</td>
19 </tr>
20 {/each}
21 </tbody>
22</table>
23
24<style>
25 .scan-result {
26 border: 1px solid #333;
27 border-collapse: collapse;
28 display: none;
29 float: left;
30 margin-top: 20px;
31 margin-bottom: 40px;
32 }
33
34 td, th {
35 border: 1px solid #333;
36 padding: 5px 10px;
37 }
38
39 th {
40 text-align: center;
41 background-color: hsl(207, 100%, 86%);
42 padding: 12px 10px;
43 }
44
45 td.no {
46 font-weight: bold;
47 text-align: right;
48 }
49
50 td.handle {
51 width: 280px;
52 }
53
54 td.count {
55 padding: 5px 15px;
56 }
57
58 .avatar {
59 width: 24px;
60 height: 24px;
61 border-radius: 14px;
62 vertical-align: middle;
63 margin-right: 2px;
64 padding: 2px;
65 }
66
67 @media (prefers-color-scheme: dark) {
68 .scan-result, td, th {
69 border-color: #888;
70 }
71
72 th {
73 background-color: hsl(207, 90%, 25%);
74 }
75 }
76</style>