61 lines
1.3 KiB
Svelte
61 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import UpObject from "../../display/UpObject.svelte";
|
|
import HashBadge from "../../display/HashBadge.svelte";
|
|
import Spinner from "../../utils/Spinner.svelte";
|
|
import UpLink from "../../display/UpLink.svelte";
|
|
|
|
export let address: string;
|
|
|
|
let loaded = "";
|
|
let handled = true;
|
|
let identity = address;
|
|
</script>
|
|
|
|
<UpLink to={{ entity: address }}>
|
|
<div class="thumbnail">
|
|
<div class="image" class:loaded={loaded == address || !handled}>
|
|
{#if handled && loaded != address}
|
|
<div class="spinner">
|
|
<Spinner centered />
|
|
</div>
|
|
{/if}
|
|
{#if handled}
|
|
<img
|
|
src="api/thumb/{address}"
|
|
alt="Thumbnail for {identity}..."
|
|
on:load={() => (loaded = address)}
|
|
on:error={() => (handled = false)}
|
|
/>
|
|
{:else}
|
|
<div class="hashbadge">
|
|
<HashBadge {address} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="label">
|
|
<UpObject {address} on:resolved />
|
|
</div>
|
|
</div>
|
|
</UpLink>
|
|
|
|
<style lang="scss">
|
|
.thumbnail {
|
|
border: 1px solid var(--foreground);
|
|
border-radius: 4px;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.image.loaded {
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hashbadge {
|
|
font-size: 64px;
|
|
opacity: 0.25;
|
|
}
|
|
</style>
|