initial commit

frontend/src/routes/settings/admin/application-configuration/application-image.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import FileInput from '$lib/components/file-input.svelte';
+	import { Label } from '$lib/components/ui/label';
+	import { cn } from '$lib/utils/style';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		id,
+		imageClass,
+		label,
+		image = $bindable<File | null>(null),
+		imageURL,
+		accept = 'image/png, image/jpeg, image/svg+xml',
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		id: string;
+		imageClass: string;
+		label: string;
+		image: File | null;
+		imageURL: string;
+		accept?: string;
+	} = $props();
+
+	let imageDataURL = $state(imageURL);
+
+	function onImageChange(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0] || null;
+		if (!file) return;
+
+		image = file;
+
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			imageDataURL = event.target?.result as string;
+		};
+		reader.readAsDataURL(file);
+	}
+</script>
+
+<div {...restProps}>
+	<Label for={id}>{label}</Label>
+	<FileInput {id} variant="secondary" {accept} onchange={onImageChange}>
+		<div class="bg-muted group relative flex items-center rounded">
+			<img
+				class={cn(
+					'h-full w-full rounded object-cover p-3 transition-opacity duration-200 group-hover:opacity-10',
+					imageClass
+				)}
+				src={imageDataURL}
+				alt={label}
+			/>
+			<span
+				class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform font-medium opacity-0 transition-opacity group-hover:opacity-100"
+			>
+				Update
+			</span>
+		</div>
+	</FileInput>
+</div>