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 <div id="accountName">
16 {account.displayName || account.handle || account.did}
17 </div>
18 {:else}
19 <div id="accountName" class="no-avatar">
20 {account.displayName || account.handle || account.did}
21 </div>
22 {/if}
23 </div>
24</a>
25
26<style>
27 #accountContainer {
28 display: flex;
29 text-align: start;
30 align-items: center;
31 background-color: var(--background-color);
32 padding: 0px;
33 margin-bottom: 15px;
34 border: 1px solid var(--border-color);
35 min-height: 50px;
36 }
37 #accountName {
38 margin-left: 10px;
39 font-size: 0.9em;
40 max-width: 80%;
41
42 /* replace overflow with ellipsis */
43 overflow: hidden;
44 text-overflow: ellipsis;
45 white-space: nowrap;
46 }
47 .no-avatar {
48 margin-left: 60px !important;
49 }
50 #avatar {
51 width: 50px;
52 height: 50px;
53 margin: 0px;
54 object-fit: cover;
55 border-right: var(--border-color) 1px solid;
56 }
57</style>