60 lines
1.2 KiB
Svelte
60 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import HashBadge from './HashBadge.svelte';
|
|
import UpLink from './UpLink.svelte';
|
|
import BlobPreview from './BlobPreview.svelte';
|
|
import UpObject from './UpObject.svelte';
|
|
|
|
export let address: string;
|
|
export let labels: string[] | undefined = undefined;
|
|
export let thumbnail = true;
|
|
export let banner = true;
|
|
export let select = true;
|
|
</script>
|
|
|
|
<div class="upobjectcard">
|
|
<UpLink to={{ entity: address }} passthrough>
|
|
<div class="inner">
|
|
{#if thumbnail}
|
|
<BlobPreview {address} />
|
|
{:else}
|
|
<div class="badge">
|
|
<HashBadge {address} />
|
|
</div>
|
|
{/if}
|
|
<div class="label">
|
|
<UpObject {address} {labels} {banner} {select} link on:resolved />
|
|
</div>
|
|
</div>
|
|
</UpLink>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.upobjectcard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
overflow: hidden;
|
|
|
|
.inner {
|
|
border: 1px solid var(--foreground-lighter);
|
|
border-radius: 4px;
|
|
padding: 0.25rem;
|
|
max-height: 420px;
|
|
min-height: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|