106 lines
2.1 KiB
Svelte
106 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from "svelte";
|
|
import HashBadge from "./HashBadge.svelte";
|
|
import Ellipsis from "../utils/Ellipsis.svelte";
|
|
import { useEntity } from "../../lib/entity";
|
|
import { Link } from "svelte-navigator";
|
|
const dispatch = createEventDispatcher();
|
|
|
|
export let address: string;
|
|
export let labels: string[] = [];
|
|
|
|
let resolving = true;
|
|
|
|
$: ({ entity } = useEntity(address));
|
|
$: resolving = !$entity;
|
|
|
|
// Identification
|
|
let inferredIds: string[] = [];
|
|
$: inferredIds = $entity?.identify() || [];
|
|
|
|
$: displayLabel =
|
|
Array.from(new Set(inferredIds.concat(labels))).join(" | ") || address;
|
|
|
|
$: dispatch("resolved", inferredIds);
|
|
</script>
|
|
|
|
<div class="upcard" class:identified={Boolean(inferredIds)}>
|
|
<Link class="main" to="/browse/{address}">
|
|
<div class="visual">
|
|
<HashBadge {address} />
|
|
</div>
|
|
<div class="label" class:resolving title={displayLabel}>
|
|
<h2>
|
|
<Ellipsis value={displayLabel} />
|
|
</h2>
|
|
{#if $entity?.get("NOTE")}
|
|
<p class="note">
|
|
{$entity.get("NOTE")}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
|
|
<style scoped lang="scss">
|
|
.upcard {
|
|
background: var(--background-lighter);
|
|
|
|
border: 0.12em solid var(--foreground);
|
|
border-radius: 0.2em;
|
|
|
|
font-family: var(--monospace-font);
|
|
line-break: anywhere;
|
|
|
|
width: var(--width);
|
|
height: var(--height);
|
|
|
|
&.identified {
|
|
font-family: var(--default-font);
|
|
font-size: 0.95em;
|
|
line-break: auto;
|
|
}
|
|
|
|
:global(.main) {
|
|
text-decoration: none;
|
|
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
margin: .5em;
|
|
}
|
|
|
|
:global(.main > *){
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
text-align: center;
|
|
margin-top: 0.5em;
|
|
|
|
h2 {
|
|
font-size: unset;
|
|
margin: 0.25em;
|
|
}
|
|
|
|
.note {
|
|
margin: 0;
|
|
font-size: 0.66em;
|
|
}
|
|
}
|
|
|
|
.visual {
|
|
display: contents;
|
|
font-size: 3em;
|
|
}
|
|
|
|
.resolving {
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|