self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-26 05:01:05 +02:00
Code Issues Releases Activity

feat(web): immich-ui components (#14263)

Browse Source 
* feat: add immich-ui to auth pages

* fix: welcome icon

* styling

* fix: mobile padding

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen
2025-01-14 14:53:33 -05:00
committed by GitHub
parent 073fccb517
commit b9000d8770
13 changed files with 345 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/lib/components/layouts/AuthPageLayout.svelte
View File

@ -1,36 +1,25 @@
<script lang="ts">
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { Card, CardBody, CardHeader, Heading, Logo, VStack } from '@immich/ui';
import type { Snippet } from 'svelte';
interface Props {
title: string;
message?: Snippet;
showMessage?: boolean;
children?: Snippet;
}
let { title, message, showMessage = message != undefined, children }: Props = $props();
let { title, children }: Props = $props();
</script>
<section class="min-w-screen flex min-h-screen place-content-center place-items-center p-4">
<div
class="flex w-full max-w-lg flex-col gap-4 rounded-3xl border bg-white p-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<div class="flex flex-col place-content-center place-items-center gap-4 py-4">
<ImmichLogo noText class="h-24 w-24" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">
{title}
</h1>
</div>
{#if showMessage}
<div
class="w-full rounded-xl border-2 border-immich-primary bg-immich-primary/5 p-4 text-sm font-medium text-immich-primary dark:border-immich-dark-bg dark:text-immich-dark-primary"
>
{@render message?.()}
</div>
{/if}
{@render children?.()}
</div>
<section class="min-w-screen flex min-h-screen items-center justify-center">
<Card color="secondary" class="w-full max-w-xl border m-2">
<CardHeader class="mt-6">
<VStack>
<Logo variant="icon" size="giant" />
<Heading size="large" class="font-semibold" color="primary">{title}</Heading>
</VStack>
</CardHeader>
<CardBody>
{@render children?.()}
</CardBody>
</Card>
</section>