feat: logo

.prettierignore

@@ -2,3 +2,4 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+src/lib/assets

src/docs/constants.ts

@@ -1,5 +1,16 @@
-export enum ThemeOption {
+import type { Color, Shape, Size } from '@immich/ui';
+
+export const shapes: Shape[] = ['rectangle', 'semi-round', 'round'];
+export const colors: Color[] = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
+export const sizes: Size[] = ['tiny', 'small', 'medium', 'large', 'giant'];
+
+export enum DisplayOption {
 	Both = 'both',
 	Light = 'light',
 	Dark = 'dark',
 }
+
+export enum Theme {
+	Light = 'light',
+	Dark = 'dark',
+}

src/docs/examples/LogoExamples.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { sizes as defaultSizes } from '$docs/constants.js';
+	import { Card, CardBody, CardHeader, CardTitle, Logo } from '@immich/ui';
+
+	const sizes = [...defaultSizes, 'landing'] as const;
+	type Props = { theme?: 'dark' | 'light' };
+	const { theme = 'dark' }: Props = $props();
+</script>
+
+<div class="flex flex-col gap-4">
+	<Card>
+		<CardHeader>
+			<CardTitle>Logo</CardTitle>
+		</CardHeader>
+		<CardBody>
+			<div class="m-2 flex flex-col gap-2">
+				{#each sizes as size}
+					<div class="flex gap-1 rounded-xl bg-gray-300 p-2 dark:bg-gray-600">
+						<Logo {size} {theme} variant="logo"></Logo>
+						<Logo {size} {theme} variant="logo"></Logo>
+						<Logo {size} {theme} variant="logo"></Logo>
+					</div>
+				{/each}
+			</div>
+		</CardBody>
+	</Card>
+	<Card>
+		<CardHeader>
+			<CardTitle>Icon</CardTitle>
+		</CardHeader>
+		<CardBody>
+			{#each sizes as size}
+				<div>
+					<Logo {size} {theme} variant="icon"></Logo>
+				</div>
+			{/each}
+		</CardBody>
+	</Card>
+	<Card>
+		<CardHeader>
+			<CardTitle>Inline</CardTitle>
+		</CardHeader>
+		<CardBody>
+			{#each sizes as size}
+				<div>
+					<Logo {size} {theme} variant="inline"></Logo>
+				</div>
+			{/each}
+		</CardBody>
+	</Card>
+
+	<Card>
+		<CardHeader>
+			<CardTitle>Stacked</CardTitle>
+		</CardHeader>
+		<CardBody>
+			{#each sizes as size}
+				<div>
+					<Logo {size} {theme} variant="stacked"></Logo>
+				</div>
+			{/each}
+		</CardBody>
+	</Card>
+</div>

src/docs/routes.ts

@@ -1,16 +1,18 @@
 import ButtonExamples from '$docs/examples/ButtonExamples.svelte';
 import CardExamples from '$docs/examples/CardExamples.svelte';
 import CheckboxExamples from '$docs/examples/CheckboxExamples.svelte';
+import LogoExamples from '$docs/examples/LogoExamples.svelte';
 import type { Component } from 'svelte';
 
 type Route = {
 	name: string;
 	link: string;
-	component: Component;
+	component: Component | Component<{ theme?: 'light' | 'dark' }>;
 };
 
 export const routes: Route[] = [
 	{ name: 'Button', link: '/examples/button', component: ButtonExamples },
 	{ name: 'Checkbox', link: '/examples/checkbox', component: CheckboxExamples },
 	{ name: 'Card', link: '/examples/card', component: CardExamples },
+	{ name: 'Logo', link: '/examples/logo', component: LogoExamples },
 ];