From 1fa57084547d0956e8ec68049d1702e552d29e70 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Sat, 5 Oct 2024 14:37:48 +0200
Subject: [PATCH] component: description

---
 src/lib/assets/icons/index.ts                 |  2 +
 .../assets/icons/information-fill-small.svg   |  4 ++
 .../ui/description/description.svelte         | 41 +++++++++++++++++++
 src/lib/components/ui/description/index.ts    |  1 +
 src/lib/config/sitemap.ts                     |  3 +-
 src/routes/description/+page.svelte           | 15 ++++++-
 src/routes/description/+page.ts               | 22 ++++++++++
 src/routes/description/default.svelte         |  9 ++++
 8 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/assets/icons/information-fill-small.svg
 create mode 100644 src/lib/components/ui/description/description.svelte
 create mode 100644 src/lib/components/ui/description/index.ts
 create mode 100644 src/routes/description/+page.ts
 create mode 100644 src/routes/description/default.svelte

diff --git a/src/lib/assets/icons/index.ts b/src/lib/assets/icons/index.ts
index 5364f6f..d8815c0 100644
--- a/src/lib/assets/icons/index.ts
+++ b/src/lib/assets/icons/index.ts
@@ -41,6 +41,7 @@ import GitBranch from './git-branch.svg?component';
 import Globe from './globe.svg?component';
 import GridSquare from './grid-square.svg?component';
 import Inbox from './inbox.svg?component';
+import InformationFillSmall from './information-fill-small.svg?component';
 import Information from './information.svg?component';
 import Key from './key.svg?component';
 import Link from './link.svg?component';
@@ -122,6 +123,7 @@ export const Icons = {
 	Globe,
 	GridSquare,
 	Inbox,
+	InformationFillSmall,
 	Information,
 	Key,
 	Link,
diff --git a/src/lib/assets/icons/information-fill-small.svg b/src/lib/assets/icons/information-fill-small.svg
new file mode 100644
index 0000000..9f11012
--- /dev/null
+++ b/src/lib/assets/icons/information-fill-small.svg
@@ -0,0 +1,4 @@
+<svg height="16" stroke-linejoin="round" color="currentColor" viewBox="0 0 16 16" width="16">
+    <path d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" fill="currentColor" fill-opacity="0.08"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 6C8.55228 6 9 5.55228 9 5C9 4.44772 8.55228 4 8 4C7.44771 4 7 4.44772 7 5C7 5.55228 7.44771 6 8 6ZM7 7H6.25V8.5H7H7.24999V10.5V11.25H8.74999V10.5V8C8.74999 7.44772 8.30227 7 7.74999 7H7Z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/ui/description/description.svelte b/src/lib/components/ui/description/description.svelte
new file mode 100644
index 0000000..afcd6ec
--- /dev/null
+++ b/src/lib/components/ui/description/description.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLDListElement> & {
+		tooltip: string;
+		content: string;
+	};
+
+	let {
+		title,
+		tooltip,
+		content,
+		class: class_name = undefined,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<dl class={cn('grid gap-2', class_name)} {...rest}>
+	<dt
+		class="inline-flex min-h-[14px] items-center gap-0.5 whitespace-nowrap text-sm capitalize leading-[14px] text-gray-900"
+	>
+		{title}
+		<Tooltip.Provider delayDuration={150}>
+			<Tooltip.Root>
+				<Tooltip.Trigger class="cursor-auto">
+					<Icons.InformationFillSmall />
+				</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content>
+						<p>{tooltip}</p>
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
+	</dt>
+	<dd class="text-sm font-medium leading-4 text-gray-1000">{content}</dd>
+</dl>
diff --git a/src/lib/components/ui/description/index.ts b/src/lib/components/ui/description/index.ts
new file mode 100644
index 0000000..7528887
--- /dev/null
+++ b/src/lib/components/ui/description/index.ts
@@ -0,0 +1 @@
+export { default as Description } from './description.svelte';
diff --git a/src/lib/config/sitemap.ts b/src/lib/config/sitemap.ts
index 3ca07d4..ea91ee4 100644
--- a/src/lib/config/sitemap.ts
+++ b/src/lib/config/sitemap.ts
@@ -101,8 +101,7 @@ export const aside_items: Aside = {
 		},
 		{
 			title: 'Description',
-			href: '/description',
-			status: 'soon'
+			href: '/description'
 		},
 		{
 			title: 'Drawer',
diff --git a/src/routes/description/+page.svelte b/src/routes/description/+page.svelte
index 6c910ae..9c9d155 100644
--- a/src/routes/description/+page.svelte
+++ b/src/routes/description/+page.svelte
@@ -1 +1,14 @@
-<h1>description</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import Default from './default.svelte';
+	import default_code from './default.svelte?raw';
+
+	let { data } = $props();
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="default" code={default_code}>
+		<Default />
+	</Demo>
+</PageWrapper>
diff --git a/src/routes/description/+page.ts b/src/routes/description/+page.ts
new file mode 100644
index 0000000..789bc09
--- /dev/null
+++ b/src/routes/description/+page.ts
@@ -0,0 +1,22 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Description';
+	const description =
+		'Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}
diff --git a/src/routes/description/default.svelte b/src/routes/description/default.svelte
new file mode 100644
index 0000000..61900e1
--- /dev/null
+++ b/src/routes/description/default.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Description } from '$lib/components/ui/description';
+</script>
+
+<Description
+	title="Section Title"
+	content="Data about this section."
+	tooltip="Additional context about what this section refers to."
+/>