41 lines
1.1 KiB
Svelte
41 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import Qrcode from '$lib/components/shared-components/Qrcode.svelte';
|
|
import { copyToClipboard } from '$lib/utils';
|
|
import { HStack, IconButton, Input, Modal, ModalBody } from '@immich/ui';
|
|
import { mdiContentCopy, mdiLink } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
type Props = {
|
|
title: string;
|
|
value: string;
|
|
onClose: () => void;
|
|
};
|
|
|
|
let { title, value, onClose }: Props = $props();
|
|
|
|
let modalWidth = $state(0);
|
|
</script>
|
|
|
|
<Modal {title} icon={mdiLink} {onClose} size="small">
|
|
<ModalBody>
|
|
<div class="w-full px-10 py-2">
|
|
<div bind:clientWidth={modalWidth} class="w-full">
|
|
<Qrcode {value} width={modalWidth} />
|
|
</div>
|
|
</div>
|
|
<HStack class="w-full pt-3" gap={1}>
|
|
<Input bind:value disabled class="flex flex-row" />
|
|
<div>
|
|
<IconButton
|
|
variant="ghost"
|
|
shape="round"
|
|
color="secondary"
|
|
icon={mdiContentCopy}
|
|
onclick={() => (value ? copyToClipboard(value) : '')}
|
|
aria-label={$t('copy_link_to_clipboard')}
|
|
/>
|
|
</div>
|
|
</HStack>
|
|
</ModalBody>
|
|
</Modal>
|