-
Notifications
You must be signed in to change notification settings - Fork 382
/
CenteredModal.svelte
48 lines (43 loc) · 1.17 KB
/
CenteredModal.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script lang="ts">
import { SettingsService } from '$lib/gen'
import { onMount } from 'svelte'
import WindmillIcon from './icons/WindmillIcon.svelte'
export let subtitle: string | undefined = undefined
export let title = 'Windmill'
export let disableLogo = false
let version = ''
onMount(async () => {
version = await SettingsService.backendVersion()
})
</script>
<div class="center-center min-h-screen p-4 relative bg-gray-50">
<div class="flex flex-col gap-2 items-center w-full">
{#if !disableLogo}
<div class="hidden lg:block">
<div>
<WindmillIcon height="100px" width="100px" spin="slow" />
</div>
<h2 class="text-center pt-2 text-gray-800">Windmill</h2>
</div>
{/if}
<div
class="border rounded-md shadow-md bg-white w-full max-w-[640px]
p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
>
<div class="mb-10">
<h1 class="text-center">
{title}
</h1>
{#if subtitle}
<p class="text-sm text-center text-gray-600 mt-2">
{subtitle}
</p>
{/if}
</div>
<slot />
</div>
</div>
<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
<span class="font-mono">{version}</span>
</div>
</div>