easy-png-tools2/web/src/lib/components/tool/SourceCard.svelte

<script lang="ts">
	import type { PixelImage } from '$lib/core/types';
	import { t } from '$lib/i18n/t';
	import DropOverlay from '../DropOverlay.svelte';
	import DropZone from '../DropZone.svelte';
	import Preview from '../Preview.svelte';
	import Button from '../ui/Button.svelte';

	interface Props {
		source: PixelImage | null;
		onFile: (file: File) => void;
		onError: (message: string) => void;
		onReset: () => void;
		pipetteActive?: boolean;
		onPickColor?: (hex: string) => void;
	}

	let { source, onFile, onError, onReset, pipetteActive = false, onPickColor }: Props = $props();
</script>

<div class="container">
	{#if !source}
		<DropZone {onFile} {onError} />
	{:else}
		<DropOverlay {onFile} {onError}>
			<div class="media">
				<Preview image={source} pipetteActive={pipetteActive} onPickColor={onPickColor} />
			</div>
			<Button variant="secondary" onclick={onReset}>{t('sourceCard.replaceImage')}</Button>
		</DropOverlay>
	{/if}
</div>

<style>
	.container {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		min-width: 0;
		height: 100%;
	}

	.media {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 16rem;
	}
</style>