feat: avatar component (#52)

src/docs/components/ComponentCard.svelte

@@ -9,9 +9,15 @@
 	const { component }: Props = $props();
 </script>
 
-<Button href={asComponentHref(component.name)} variant="outline" color="primary" class="h-24 w-40">
-	<VStack gap={2} class="p-6">
-		<Icon icon={component.icon} size="2em" />
+<Button
+	href={asComponentHref(component.name)}
+	variant="outline"
+	color="secondary"
+	class="h-24 w-40"
+	size="large"
+>
+	<VStack gap={2}>
+		<Icon icon={component.icon} size="3rem" />
 		<Heading size="tiny">{component.name}</Heading>
 	</VStack>
 </Button>

src/docs/constants.ts

@@ -1,4 +1,5 @@
 import {
+	mdiAccountCircle,
 	mdiAlertCircleOutline,
 	mdiApplicationOutline,
 	mdiButtonCursor,
@@ -79,8 +80,9 @@ export const componentGroups = [
 		],
 	},
 	{
-		title: 'Immich',
+		title: 'Miscellaneous',
 		components: [
+			{ name: 'Avatar', icon: mdiAccountCircle },
 			{ name: 'Logo', icon: mdiImage },
 			{ name: 'SupporterBadge', icon: mdiPartyPopper },
 		],

src/lib/components/Avatar/Avatar.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Size } from '$lib/types.js';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size?: Size;
+		color?:
+			| 'primary'
+			| 'pink'
+			| 'red'
+			| 'yellow'
+			| 'blue'
+			| 'green'
+			| 'purple'
+			| 'orange'
+			| 'gray'
+			| 'amber';
+		name: string;
+	};
+
+	const { color = 'primary', size = 'medium', name }: Props = $props();
+
+	const styles = tv({
+		base: 'flex h-full w-full select-none items-center justify-center font-medium',
+		variants: {
+			size: {
+				tiny: 'w-5 h-5 text-xs',
+				small: 'w-7 h-7 text-sm',
+				medium: 'w-10 h-10 text-md',
+				large: 'w-12 h-12 text-lg',
+				giant: 'w-16 h-16 text-xl',
+			},
+			color: {
+				primary: 'bg-primary text-light',
+				pink: 'bg-pink-400 text-light',
+				red: 'bg-red-500 text-light',
+				yellow: 'bg-yellow-500 text-light',
+				purple: 'bg-purple-600 text-dark',
+				orange: 'bg-orange-600 text-light',
+				gray: 'bg-gray-600 text-dark',
+				amber: 'bg-amber-600 text-light',
+				blue: 'bg-blue-500 text-dark',
+				green: 'bg-green-600 text-dark',
+			},
+		},
+	});
+
+	const wrapper = tv({
+		base: 'overflow-hidden shadow-md rounded rounded-full',
+	});
+
+	const getInitials = (name: string) => {
+		return name
+			.split(' ')
+			.map((part) => part.at(0))
+			.join('')
+			.substr(0, 2)
+			.toUpperCase();
+	};
+
+	const initials = $derived(getInitials(name));
+</script>
+
+<figure class={wrapper()}>
+	<span class={styles({ size, color })}>{initials}</span>
+</figure>

src/lib/index.ts

@@ -2,6 +2,7 @@ export { default as Alert } from '$lib/components/Alert/Alert.svelte';
 export { default as AppShell } from '$lib/components/AppShell/AppShell.svelte';
 export { default as AppShellHeader } from '$lib/components/AppShell/AppShellHeader.svelte';
 export { default as AppShellSidebar } from '$lib/components/AppShell/AppShellSidebar.svelte';
+export { default as Avatar } from '$lib/components/Avatar/Avatar.svelte';
 export { default as Button } from '$lib/components/Button/Button.svelte';
 export { default as Card } from '$lib/components/Card/Card.svelte';
 export { default as CardBody } from '$lib/components/Card/CardBody.svelte';

src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	import ComponentCard from '$docs/components/ComponentCard.svelte';
 	import Grid from '$docs/components/Grid.svelte';
 	import { componentGroups } from '$docs/constants.js';
-	import { Heading, Link, Stack, Text } from '@immich/ui';
+	import { Code, Heading, Link, Stack, Text } from '@immich/ui';
 </script>
 
 <div class="max-w-screen-lg p-2">
@@ -16,10 +16,7 @@
 
 		<Heading size="large">Install</Heading>
 		<Text>@immich/ui is published as an npm package. You can install it using npm.</Text>
-
-		<div class="py-4">
-			<code class="rounded-lg border border-dark p-4">npm i --save-dev @immich/ui</code>
-		</div>
+		<Code color="secondary">npm i --save-dev @immich/ui</Code>
 
 		<Heading size="large">Components</Heading>
 		<Stack gap={8}>

src/routes/components/alert/+page.svelte

@@ -9,7 +9,7 @@
 
 	const examples = [
 		{ title: 'Basic', code: basicExample, component: BasicExample },
-		{ title: 'Colors', code: colorExample, component: ColorExample },
+		{ title: 'Color', code: colorExample, component: ColorExample },
 		{ title: 'Custom Icon', code: customIconExample, component: CustomIconExample },
 	];
 </script>

src/routes/components/avatar/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ExampleLayout from '$docs/components/ExampleLayout.svelte';
+	import BasicExample from './BasicExample.svelte';
+	import basicExample from './BasicExample.svelte?raw';
+	import ColorExample from './ColorExample.svelte';
+	import colorExample from './ColorExample.svelte?raw';
+	import SizeExample from './SizeExample.svelte';
+	import sizeExample from './SizeExample.svelte?raw';
+
+	const examples = [
+		{ title: 'Basic', code: basicExample, component: BasicExample },
+		{ title: 'Color', code: colorExample, component: ColorExample },
+		{ title: 'Size', code: sizeExample, component: SizeExample },
+	];
+</script>
+
+<ExampleLayout name="Avatar" {examples} />

src/routes/components/avatar/BasicExample.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Avatar, HStack } from '@immich/ui';
+</script>
+
+<HStack>
+	<Avatar name="Immich User" />
+</HStack>

src/routes/components/avatar/ColorExample.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar, HStack } from '@immich/ui';
+</script>
+
+<HStack>
+	<Avatar color="primary" name="Immich User" />
+	<Avatar color="gray" name="Immich User" />
+	<Avatar color="purple" name="Immich User" />
+	<Avatar color="blue" name="Immich User" />
+	<Avatar color="green" name="Immich User" />
+	<Avatar color="yellow" name="Immich User" />
+	<Avatar color="amber" name="Immich User" />
+	<Avatar color="orange" name="Immich User" />
+	<Avatar color="red" name="Immich User" />
+	<Avatar color="pink" name="Immich User" />
+</HStack>

src/routes/components/avatar/SizeExample.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Avatar, HStack } from '@immich/ui';
+</script>
+
+<HStack>
+	<Avatar size="tiny" name="Immich User" />
+	<Avatar size="small" name="Immich User" />
+	<Avatar size="medium" name="Immich User" />
+	<Avatar size="large" name="Immich User" />
+	<Avatar size="giant" name="Immich User" />
+</HStack>

src/routes/components/loading-spinner/+page.svelte

@@ -7,7 +7,7 @@
 
 	const examples = [
 		{ title: 'Sizes', code: sizeExample, component: SizeExample },
-		{ title: 'Colors', code: colorExample, component: ColorExample },
+		{ title: 'Color', code: colorExample, component: ColorExample },
 	];
 </script>
 

src/routes/components/switch/+page.svelte

@@ -10,7 +10,7 @@
 
 	const examples = [
 		{ title: 'Basic', code: basicExample, component: BasicExample },
-		{ title: 'Colors', code: colorExample, component: ColorExample },
+		{ title: 'Color', code: colorExample, component: ColorExample },
 		{ title: 'Form', code: formExample, component: FormExample },
 	];
 </script>