From 51049b2b261d0707abdbd97674b894e28be68d82 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 3 Jan 2025 10:49:35 -0500
Subject: [PATCH] Alert component and InfoIcon

---
 .../components/Feedback/Alert.stories.svelte  | 25 +++++++++++++++++++
 src/lib/components/Feedback/Alert.svelte      | 24 ++++++++++++++++++
 src/lib/components/Feedback/index.ts          |  1 +
 src/lib/components/Icons/InfoIcon.svelte      |  8 ++++++
 src/lib/components/Icons/index.ts             |  1 +
 5 files changed, 59 insertions(+)
 create mode 100644 src/lib/components/Feedback/Alert.stories.svelte
 create mode 100644 src/lib/components/Feedback/Alert.svelte
 create mode 100644 src/lib/components/Icons/InfoIcon.svelte
 create mode 100644 src/lib/components/Icons/index.ts

diff --git a/src/lib/components/Feedback/Alert.stories.svelte b/src/lib/components/Feedback/Alert.stories.svelte
new file mode 100644
index 0000000..82762b0
--- /dev/null
+++ b/src/lib/components/Feedback/Alert.stories.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Alert from './Alert.svelte';
+	import type { ComponentProps } from 'svelte';
+	import { InfoIcon } from '../Icons';
+
+	const { Story } = defineMeta({
+		title: 'Feedback/Alert',
+		component: Alert,
+		argTypes: {
+			status: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+		},
+	});
+</script>
+
+{#snippet template(props: ComponentProps<typeof Alert>)}
+	<Alert {...props}>
+		{#snippet icon()}
+			<InfoIcon class="h-6 w-6 shrink-0 stroke-info" />
+		{/snippet}
+		<span>Hello world!</span>
+	</Alert>
+{/snippet}
+
+<Story name="Default" args={{}} children={template} />
diff --git a/src/lib/components/Feedback/Alert.svelte b/src/lib/components/Feedback/Alert.svelte
new file mode 100644
index 0000000..2dc4efb
--- /dev/null
+++ b/src/lib/components/Feedback/Alert.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { DaisyColor } from '$lib/types';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children?: Snippet;
+		icon?: Snippet;
+		status?: Extract<DaisyColor, 'info' | 'success' | 'warning' | 'error'>;
+	};
+
+	let { children, icon, status: color }: Props = $props();
+</script>
+
+<div
+	role="alert"
+	class="alert"
+	class:alert-info={color === 'info'}
+	class:alert-success={color === 'success'}
+	class:alert-warning={color === 'warning'}
+	class:alert-error={color === 'error'}
+>
+	{@render icon?.()}
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/Feedback/index.ts b/src/lib/components/Feedback/index.ts
index 85096d3..040c9b0 100644
--- a/src/lib/components/Feedback/index.ts
+++ b/src/lib/components/Feedback/index.ts
@@ -1 +1,2 @@
+export { default as Alert } from './Alert.svelte';
 export { default as Loader } from './Loader.svelte';
diff --git a/src/lib/components/Icons/InfoIcon.svelte b/src/lib/components/Icons/InfoIcon.svelte
new file mode 100644
index 0000000..1eb8fc1
--- /dev/null
+++ b/src/lib/components/Icons/InfoIcon.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	let { class: className, ...props }: SvelteHTMLElements['i'] = $props();
+</script>
+
+<i {...props} class={twMerge(className, 'fi fi-sr-info')}></i>
diff --git a/src/lib/components/Icons/index.ts b/src/lib/components/Icons/index.ts
new file mode 100644
index 0000000..334fb9f
--- /dev/null
+++ b/src/lib/components/Icons/index.ts
@@ -0,0 +1 @@
+export { default as InfoIcon } from './InfoIcon.svelte';