init

lib/components/bio/profile/Name.svelte

@@ -0,0 +1,72 @@
+<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>