tophhie.cloud
A frontend for your PDS
1<script lang="ts">
2 import type { AccountMetadata } from "./pdsfetch";
3 const { account, welcome }: { account: AccountMetadata; welcome?: boolean } = $props();
4 import { Config } from "../../config";
5</script>
6
7<a id="link" href="{Config.FRONTEND_URL}/profile/{account.handle || account.did}">
8 <div id="accountContainer">
9 {#if account.avatarCid}
10 <img
11 id="avatar"
12 alt="avatar of {account.displayName}"
13 src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
14 />
15 <div style="display: flex; flex-direction: column; width: 100%">
16 {#if welcome}
17 <div id="accountName">
18 Welcome to our latest member...
19 </div>
20 {/if}
21 <div id="accountName">
22 {account.displayName || account.handle || account.did}
23 </div>
24 </div>
25 {:else}
26 <div style="display: flex; flex-direction: column; width: 100%">
27 {#if welcome}
28 <div id="accountName">
29 A big welcome to our latest member...
30 </div>
31 {/if}
32 <div id="accountName">
33 {account.displayName || account.handle || account.did}
34 </div>
35 </div>
36 {/if}
37 <div class="tooltip">
38 <i class="fa fa-info-circle" style="font-size: 20px"></i>
39 <span class="tooltiptext">{account.did}</span>
40 </div>
41 </div>
42</a>