mirror of
https://github.com/khoaliber/dockhand.git
synced 2026-03-02 21:19:05 +00:00
38 lines
1.0 KiB
Svelte
38 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import * as Dialog from '$lib/components/ui/dialog';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { Layers } from 'lucide-svelte';
|
|
import ImageLayersView from './ImageLayersView.svelte';
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
imageId: string;
|
|
imageName?: string;
|
|
}
|
|
|
|
let { open = $bindable(), imageId, imageName }: Props = $props();
|
|
</script>
|
|
|
|
<Dialog.Root bind:open>
|
|
<Dialog.Content class="max-w-5xl max-h-[90vh] flex flex-col min-h-[400px] !animate-none">
|
|
<Dialog.Header>
|
|
<Dialog.Title class="flex items-center gap-2">
|
|
<Layers class="w-5 h-5" />
|
|
Image layers: <span class="text-muted-foreground font-normal">{imageName || imageId.slice(7, 19)}</span>
|
|
</Dialog.Title>
|
|
</Dialog.Header>
|
|
|
|
<div class="flex-1 overflow-auto space-y-4">
|
|
<ImageLayersView
|
|
imageId={imageId}
|
|
imageName={imageName}
|
|
visible={open}
|
|
/>
|
|
</div>
|
|
|
|
<Dialog.Footer>
|
|
<Button variant="outline" onclick={() => (open = false)}>Close</Button>
|
|
</Dialog.Footer>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|