Files
immich/web/src/lib/components/shared-components/modal-header.svelte
Brandon Wees a02e1f5e7c chore(web): migrate CircleIconButton to @immich/ui IconButton (#18486)
* remove import and referenced file

* first pass at replacing all CircleIconButtons

* fix linting issues

* fix combobox formatting issues

* fix button context menu coloring

* remove circle icon button from search history box

* use theme switcher from UI lib

* dark mode force the asset viewer icons

* fix forced dark mode icons

* dark mode memory viewer icons

* fix: back button in memory viewer

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-06-02 14:47:23 +00:00

50 lines
1.3 KiB
Svelte

<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { IconButton } from '@immich/ui';
import { mdiClose } from '@mdi/js';
import { t } from 'svelte-i18n';
interface Props {
/**
* Unique identifier for the header text.
*/
id: string;
title: string;
onClose: () => void;
/**
* If true, the logo will be displayed next to the modal title.
*/
showLogo?: boolean;
/**
* Optional icon to display next to the modal title, if `showLogo` is false.
*/
icon?: string;
}
let { id, title, onClose, showLogo = false, icon = undefined }: Props = $props();
</script>
<div class="flex place-items-center justify-between px-5 pb-3">
<div class="flex gap-2 place-items-center">
{#if showLogo}
<ImmichLogo noText={true} class="h-[40px]" />
{:else if icon}
<Icon path={icon} size={24} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
{/if}
<h1 {id}>
{title}
</h1>
</div>
<IconButton
shape="round"
color="secondary"
variant="ghost"
onclick={onClose}
icon={mdiClose}
size="medium"
aria-label={$t('close')}
/>
</div>