1
0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-11 22:49:00 +00:00
Files
pocket-id/frontend/src/routes/login/components/login-logo-error-indicator.svelte
2024-12-17 19:36:47 +01:00

27 lines
572 B
Svelte

<script lang="ts">
import Logo from '$lib/components/logo.svelte';
import CrossAnimated from '$lib/icons/cross-animated.svelte';
import { fade } from 'svelte/transition';
const {
error
}: {
error: boolean;
} = $props();
</script>
<div
class="rounded-2xl p-3 transition-[background-color] duration-300
{error ? 'bg-red-200' : 'bg-muted'}"
>
{#if error}
<div class="flex h-10 w-10 items-center justify-center">
<CrossAnimated class="h-5 w-5" />
</div>
{:else}
<div in:fade={{ duration: 300 }}>
<Logo class="h-10 w-10" />
</div>
{/if}
</div>