From 358d3dcd59b126aa26bdf9dd49befb75bccf7a06 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 2 Jan 2025 23:25:36 -0500
Subject: [PATCH] links

---
 .../components/Navigation/Link.stories.svelte | 31 +++++++++++++++++++
 src/lib/components/Navigation/Link.svelte     | 23 ++++++++++++++
 src/lib/components/Navigation/index.ts        |  1 +
 3 files changed, 55 insertions(+)
 create mode 100644 src/lib/components/Navigation/Link.stories.svelte
 create mode 100644 src/lib/components/Navigation/Link.svelte

diff --git a/src/lib/components/Navigation/Link.stories.svelte b/src/lib/components/Navigation/Link.stories.svelte
new file mode 100644
index 0000000..30ed305
--- /dev/null
+++ b/src/lib/components/Navigation/Link.stories.svelte
@@ -0,0 +1,31 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import type { ComponentProps } from 'svelte';
+	import Link from './Link.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navigation/Link',
+		component: Link,
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'primary',
+					'secondary',
+					'accent',
+					'neutral',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Link>)}
+	<Link {...props}>Hello world!</Link>
+{/snippet}
+
+<Story name="Default" children={template} />
diff --git a/src/lib/components/Navigation/Link.svelte b/src/lib/components/Navigation/Link.svelte
new file mode 100644
index 0000000..1eef76f
--- /dev/null
+++ b/src/lib/components/Navigation/Link.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = { color?: DaisyColor; hover?: boolean } & SvelteHTMLElements['a'];
+
+	let { children, class: className, color, hover, ...props }: Props = $props();
+</script>
+
+<a
+	class={twMerge(className, 'link')}
+	class:link-primary={color === 'primary'}
+	class:link-secondary={color === 'secondary'}
+	class:link-accent={color === 'accent'}
+	class:link-neutral={color === 'neutral'}
+	class:link-info={color === 'info'}
+	class:link-success={color === 'success'}
+	class:link-warning={color === 'warning'}
+	class:link-error={color === 'error'}
+	class:link-hover={hover}
+	{...props}>{@render children?.()}</a
+>
diff --git a/src/lib/components/Navigation/index.ts b/src/lib/components/Navigation/index.ts
index 1c2df11..cb48563 100644
--- a/src/lib/components/Navigation/index.ts
+++ b/src/lib/components/Navigation/index.ts
@@ -1,4 +1,5 @@
 import Navbar from './Navbar';
 import Tabs from './Tabs';
 
+export { default as Link } from './Link.svelte';
 export { Navbar, Tabs };