src/lib/components/auth/SigninModal.svelte

<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import { signinModalState } from '$lib/state/signin-modal.svelte';
	import { Button } from '$lib/components/ui/button/index.js';
	import { LogIn } from '@lucide/svelte';
	import HFLogo from '$lib/assets/hf-logo.svg';
</script>

<Dialog.Root bind:open={signinModalState.open}>
	<Dialog.Content class="max-w-sm! p-0!">
		<Dialog.Title class="sr-only">Sign in to Hugging Face</Dialog.Title>
		<div class="flex flex-col items-center gap-4 p-6 text-center">
			<div
				class="to-emerald/10 mx-auto flex size-18 items-center justify-center rounded-full bg-linear-to-b from-amber-500/30"
			>
				<img src={HFLogo} alt="Hugging Face" class="size-14" />
			</div>
			<div>
				<h1 class="text-xl font-bold text-balance">Welcome to the Playground</h1>
				<p class="mt-1 text-sm text-muted-foreground">
					Log in to your Hugging Face account to continue.
				</p>
			</div>
			<!-- <Button variant="outline" class="mt-2 w-full gap-2" onclick={login}>
				<LogIn class="size-4" />
				Continue with Hugging Face
			</Button> -->
		</div>
	</Dialog.Content>
</Dialog.Root>