mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-03-29 02:36:35 +00:00
60 lines
1.5 KiB
Svelte
60 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import Button from '$lib/components/ui/button/button.svelte';
|
|
import ApplicationImage from './application-image.svelte';
|
|
|
|
let {
|
|
callback
|
|
}: {
|
|
callback: (
|
|
logoLight: File | null,
|
|
logoDark: File | null,
|
|
backgroundImage: File | null,
|
|
favicon: File | null
|
|
) => void;
|
|
} = $props();
|
|
|
|
let logoLight = $state<File | null>(null);
|
|
let logoDark = $state<File | null>(null);
|
|
let backgroundImage = $state<File | null>(null);
|
|
let favicon = $state<File | null>(null);
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-8">
|
|
<ApplicationImage
|
|
id="favicon"
|
|
imageClass="h-14 w-14 p-2"
|
|
label="Favicon"
|
|
bind:image={favicon}
|
|
imageURL="/api/application-configuration/favicon"
|
|
accept="image/x-icon"
|
|
/>
|
|
<ApplicationImage
|
|
id="logo-light"
|
|
imageClass="h-32 w-32"
|
|
label="Light Mode Logo"
|
|
bind:image={logoLight}
|
|
imageURL="/api/application-configuration/logo?light=true"
|
|
forceColorScheme="light"
|
|
/>
|
|
<ApplicationImage
|
|
id="logo-dark"
|
|
imageClass="h-32 w-32"
|
|
label="Dark Mode Logo"
|
|
bind:image={logoDark}
|
|
imageURL="/api/application-configuration/logo?light=false"
|
|
forceColorScheme="dark"
|
|
/>
|
|
<ApplicationImage
|
|
id="background-image"
|
|
imageClass="h-[350px] max-w-[500px]"
|
|
label="Background Image"
|
|
bind:image={backgroundImage}
|
|
imageURL="/api/application-configuration/background-image"
|
|
/>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<Button class="mt-5" onclick={() => callback(logoLight, logoDark, backgroundImage, favicon)}
|
|
>Save</Button
|
|
>
|
|
</div>
|