72 lines
1.9 KiB
Svelte
72 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import BadgeContainer from './Badges.svelte';
|
|
|
|
export let identifier: string | null | undefined;
|
|
export let secondaryIdentifier: string | null | undefined;
|
|
export let badges: BioSiteBadge[] = [];
|
|
|
|
export let align: BioSiteAlign = 'LEFT';
|
|
export let placeholder: boolean = false;
|
|
</script>
|
|
|
|
<div class="flex flex-col" class:placeholder>
|
|
<div
|
|
class="primary-id text-xl font-semibold text-text-header flex gap-2 items-center"
|
|
class:justify-center={align === 'CENTER'}
|
|
class:justify-end={align === 'RIGHT'}>
|
|
<p class="break-words line-clamp-1">{(identifier ?? secondaryIdentifier ?? 'Unknown').trim()}</p>
|
|
{#if placeholder}
|
|
<div class="placeholder-container" />
|
|
{/if}
|
|
{#if badges.length > 0 && !placeholder}
|
|
<BadgeContainer {badges} />
|
|
{/if}
|
|
</div>
|
|
<div
|
|
class="secondary-id text-text-secondary"
|
|
class:text-center={align === 'CENTER'}
|
|
class:text-right={align === 'RIGHT'}>
|
|
<p class="break-words line-clamp-1">{(!identifier ? '' : secondaryIdentifier || '').trim()}</p>
|
|
{#if placeholder}
|
|
<div class="placeholder-container" />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
div.placeholder > * {
|
|
@apply w-fit px-2 overflow-hidden select-none rounded-md relative opacity-50;
|
|
}
|
|
|
|
div.placeholder > * {
|
|
@apply bg-text-teritary !text-text-teritary;
|
|
}
|
|
|
|
div.placeholder > div.primary-id {
|
|
@apply mb-[1px];
|
|
}
|
|
|
|
div.placeholder-container {
|
|
@apply absolute top-0 left-0 bottom-0 right-0;
|
|
}
|
|
|
|
div.placeholder div.placeholder-container {
|
|
animation: slide 1s infinite;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0.8) 50%,
|
|
rgba(128, 186, 232, 0) 99%,
|
|
rgba(125, 185, 232, 0) 100%
|
|
);
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
</style>
|