init

lib/components/bio/UserPanel.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Description from './profile/Description.svelte';
+  import Footer from './profile/Footer.svelte';
+  import Name from './profile/Name.svelte';
+  import Panel from './elements/Panel.svelte';
+  import Socials from './profile/Socials.svelte';
+  import Avatar from './profile/Avatar.svelte';
+  import Extra from './profile/Extra.svelte';
+
+  export let displayName: string;
+  export let username: string;
+  export let badges: BioSiteBadge[];
+  export let description: string | null;
+  export let socials: BioSiteSocials | undefined = undefined;
+  export let uid: number;
+  export let uniqueId: string;
+  export let views: number | null;
+  export let align: BioSiteAlign;
+  export let location: string | undefined = undefined;
+  export let school: string | undefined = undefined;
+  export let workplace: string | undefined = undefined;
+
+  export let preview: boolean = false;
+  export let placeholder: boolean = false;
+
+  export let loadTime: number | undefined = undefined;
+  export let previewUid: boolean | undefined = undefined;
+  export let storelessSocials: boolean = false;
+
+  $: uidLocal = uid === -1 ? undefined : uid;
+</script>
+
+<Panel {preview}>
+  <div class="flex flex-col gap-4">
+    <Avatar {uniqueId} {align} {loadTime} />
+
+    <Name identifier={displayName} secondaryIdentifier={`@${username}`} {badges} {align} {placeholder} />
+
+    <Description {description} />
+
+    <Extra {location} {school} {workplace} />
+
+    <Socials {socials} {storelessSocials} />
+
+    <slot />
+
+    <Footer uid={previewUid === undefined ? uid : previewUid === true ? uidLocal ?? -2 : undefined} {views} />
+  </div>
+</Panel>