mirror of
https://github.com/immich-app/immich.git
synced 2026-03-11 04:37:39 +03:00
49 lines
1.5 KiB
Svelte
49 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
|
|
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
|
import { api } from '@api';
|
|
import AccountOff from 'svelte-material-icons/AccountOff.svelte';
|
|
import type { PageData } from './$types';
|
|
|
|
export let data: PageData;
|
|
</script>
|
|
|
|
<UserPageLayout user={data.user} showUploadButton title="People">
|
|
{#if data.people.length > 0}
|
|
<div class="pl-4">
|
|
<div class="flex flex-row flex-wrap gap-1">
|
|
{#each data.people as person (person.id)}
|
|
<div class="relative">
|
|
<a href="/people/{person.id}" draggable="false">
|
|
<div class="filter brightness-75 rounded-xl w-48">
|
|
<ImageThumbnail
|
|
shadow
|
|
url={api.getPeopleThumbnailUrl(person.id)}
|
|
altText={person.name}
|
|
widthStyle="100%"
|
|
/>
|
|
</div>
|
|
{#if person.name}
|
|
<span
|
|
class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
|
|
>
|
|
{person.name}
|
|
</span>
|
|
{/if}
|
|
</a>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div
|
|
class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
|
|
>
|
|
<div class="flex flex-col content-center items-center text-center">
|
|
<AccountOff size="3.5em" />
|
|
<p class="font-medium text-3xl mt-5">No people</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</UserPageLayout>
|