this repo has no description
witchcraft.systems
1<script lang="ts">
2 import type { AccountMetadata } from "./pdsfetch";
3 const { account }: { account: AccountMetadata } = $props();
4 import { Config } from "../../config";
5</script>
6
7<a id="link" href="{Config.FRONTEND_URL}/profile/{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 {/if}
16 <div id="accountName">
17 {account.displayName || account.handle || account.did}
18 </div>
19 </div>
20</a>
21
22<style>
23 #accountContainer {
24 display: flex;
25 text-align: start;
26 align-items: center;
27 background-color: var(--background-color);
28 padding: 0px;
29 margin-bottom: 15px;
30 border: 1px solid var(--border-color);
31 }
32 #accountName {
33 margin-left: 10px;
34 font-size: 0.9em;
35 max-width: 80%;
36
37 /* replace overflow with ellipsis */
38 overflow: hidden;
39 text-overflow: ellipsis;
40 white-space: nowrap;
41 }
42 #avatar {
43 width: 50px;
44 height: 50px;
45 margin: 0px;
46 object-fit: cover;
47 border-right: var(--border-color) 1px solid;
48 }
49</style>