feat: link (#20)

src/docs/constants.ts

@@ -25,6 +25,7 @@ export const routes: Route[] = [
 	{ name: 'CloseButton', link: '/examples/close-button' },
 	{ name: 'Heading', link: '/examples/heading' },
 	{ name: 'IconButton', link: '/examples/icon-button' },
+	{ name: 'Link', link: '/examples/link' },
 	{ name: 'Logo', link: '/examples/logo' },
 	{ name: 'Stack', link: '/examples/stack' },
 	{ name: 'Text', link: '/examples/text' },

src/lib/components/Link/Link.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cleanClass } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	type Props = {
+		class?: string;
+		children: Snippet;
+		href: string;
+	} & HTMLAnchorAttributes;
+
+	const { href, class: className, children, ...restProps }: Props = $props();
+</script>
+
+<a {href} class={cleanClass('underline', className)} {...restProps}>
+	{@render children()}
+</a>

src/lib/index.ts

@@ -13,6 +13,7 @@ export { default as Label } from '$lib/components/Form/Label.svelte';
 export { default as Heading } from '$lib/components/Heading/Heading.svelte';
 export { default as Icon } from '$lib/components/Icon/Icon.svelte';
 export { default as IconButton } from '$lib/components/IconButton/IconButton.svelte';
+export { default as Link } from '$lib/components/Link/Link.svelte';
 export { default as Logo } from '$lib/components/Logo/Logo.svelte';
 export { default as HStack } from '$lib/components/Stack/HStack.svelte';
 export { default as Stack } from '$lib/components/Stack/Stack.svelte';

src/routes/examples/link/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import Text from '$lib/components/Text/Text.svelte';
+	import { Card, CardBody, CardHeader, CardTitle, Link, VStack } from '@immich/ui';
+</script>
+
+<DualThemeLayout name="Link">
+	{#snippet component()}
+		<Card>
+			<CardHeader>
+				<CardTitle>Basic</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					<Text><Link href="#">Visit Immich UI</Link></Text>
+					<Text>Read the <Link href="#">release notes</Link></Text>
+					<Text>See the <Link href="#">documentation</Link> for more information</Text>
+				</VStack>
+			</CardBody>
+		</Card>
+	{/snippet}
+</DualThemeLayout>