src/lib/components/chat/Welcome.svelte

<script lang="ts">
	import { fly } from 'svelte/transition';

	import HFLogo from '$lib/assets/hf-logo.svg';

	let { showWelcome = $bindable() }: { showWelcome: boolean } = $props();

	let showWelcomeState = $state.raw<boolean>(true);

	$effect(() => {
		if (showWelcome) {
			showWelcomeState = true;
		} else {
			showWelcomeState = false;
		}
	});
</script>

{#if showWelcomeState}
	<article
		class="nodrag pointer-events-none absolute top-0 left-0 w-full -translate-y-[calc(100%+1.5rem)] cursor-auto text-center lg:w-[600px] lg:-translate-y-[calc(100%+3rem)]"
		transition:fly={{ duration: 300, y: -20 }}
	>
		<img src={HFLogo} alt="HF Logo" class="mx-auto size-10 lg:size-16" />
		<h1 class="font-mono text-xl font-extrabold xl:text-5xl">Welcome to the Playground</h1>
	</article>
{/if}