From b168c794152213f2a9f62c5f9133827c60725177 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Fri, 19 Jul 2024 20:43:51 +0200
Subject: [PATCH] link

---
 src/app.css                                 | 18 ++++++++++
 src/lib/assets/icons/external-small.svg     |  3 ++
 src/lib/assets/icons/index.ts               |  2 ++
 src/lib/components/ui/link/index.ts         | 38 +++++++++++++++++++++
 src/lib/components/ui/link/link.svelte      | 32 +++++++++++++++++
 src/routes/empty-state/informational.svelte |  7 ++--
 tailwind.config.ts                          | 10 ++++++
 7 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/assets/icons/external-small.svg
 create mode 100644 src/lib/components/ui/link/index.ts
 create mode 100644 src/lib/components/ui/link/link.svelte

diff --git a/src/app.css b/src/app.css
index 4bdd280..aeb7234 100644
--- a/src/app.css
+++ b/src/app.css
@@ -109,6 +109,15 @@
 		--gray-alpha-900: rgba(0, 0, 0, 0.61);
 		--gray-alpha-1000: rgba(0, 0, 0, 0.91);
 
+		--accents-1: #fafafa;
+		--accents-2: #eaeaea;
+		--accents-3: #999;
+		--accents-4: #888;
+		--accents-5: #666;
+		--accents-6: #444;
+		--accents-7: #333;
+		--accents-8: #111;
+
 		--contrast-fg: hsl(0 0% 100%);
 		--focus-color: var(--blue-700);
 
@@ -225,6 +234,15 @@
 		--gray-alpha-900: hsla(0, 0%, 100%, 0.61);
 		--gray-alpha-1000: hsla(0, 0%, 100%, 0.92);
 
+		--accents-1: #111;
+		--accents-2: #333;
+		--accents-3: #444;
+		--accents-4: #666;
+		--accents-5: #888;
+		--accents-6: #999;
+		--accents-7: #eaeaea;
+		--accents-8: #fafafa;
+
 		--focus-color: var(--blue-900);
 
 		/* Shadows */
diff --git a/src/lib/assets/icons/external-small.svg b/src/lib/assets/icons/external-small.svg
new file mode 100644
index 0000000..3d2ce3b
--- /dev/null
+++ b/src/lib/assets/icons/external-small.svg
@@ -0,0 +1,3 @@
+<svg stroke-linejoin="round" color="currentcolor">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 9.75V11.25C11.5 11.3881 11.3881 11.5 11.25 11.5H4.75C4.61193 11.5 4.5 11.3881 4.5 11.25L4.5 4.75C4.5 4.61193 4.61193 4.5 4.75 4.5H6.25H7V3H6.25H4.75C3.7835 3 3 3.7835 3 4.75V11.25C3 12.2165 3.7835 13 4.75 13H11.25C12.2165 13 13 12.2165 13 11.25V9.75V9H11.5V9.75ZM8.5 3H9.25H12.2495C12.6637 3 12.9995 3.33579 12.9995 3.75V6.75V7.5H11.4995V6.75V5.56066L8.53033 8.52978L8 9.06011L6.93934 7.99945L7.46967 7.46912L10.4388 4.5H9.25H8.5V3Z" fill="currentColor"></path>
+</svg>
\ No newline at end of file
diff --git a/src/lib/assets/icons/index.ts b/src/lib/assets/icons/index.ts
index 8f3cc99..132d0db 100644
--- a/src/lib/assets/icons/index.ts
+++ b/src/lib/assets/icons/index.ts
@@ -17,6 +17,7 @@ import Command from './command.svg?component';
 import Copy from './copy.svg?component';
 import Database from './database.svg?component';
 import ErrorStates from './error-states.svg?component';
+import ExternalSmall from './external-small.svg?component';
 import External from './external.svg?component';
 import FileText from './file-text.svg?component';
 import Flag from './flag.svg?component';
@@ -70,6 +71,7 @@ export const Icons = {
 	Copy,
 	Database,
 	ErrorStates,
+	ExternalSmall,
 	External,
 	FileText,
 	Flag,
diff --git a/src/lib/components/ui/link/index.ts b/src/lib/components/ui/link/index.ts
new file mode 100644
index 0000000..da649d1
--- /dev/null
+++ b/src/lib/components/ui/link/index.ts
@@ -0,0 +1,38 @@
+import type { Button as LinkPrimitive } from 'bits-ui';
+import { type VariantProps, tv } from 'tailwind-variants';
+import Link from './link.svelte';
+
+const link_variants = tv({
+	base: 'inline-flex select-none items-center justify-center gap-x-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background-200 transition-[background,color,transform,box-shadow] ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-color focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-gray-700 [&>svg]:size-3',
+	variants: {
+		variant: {
+			default: '',
+			secondary: 'text-accents-5 hover:text-gray-1000',
+			tertiary: '',
+			error: '',
+			warning: ''
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+type Variant = VariantProps<typeof link_variants>['variant'];
+
+type Props = LinkPrimitive.Props & {
+	variant?: Variant;
+	external?: boolean;
+	href: string;
+};
+
+type Events = LinkPrimitive.Events;
+
+export {
+	Link,
+	link_variants,
+	type Events as ButtonEvents,
+	type Props as ButtonProps,
+	type Events,
+	type Props
+};
diff --git a/src/lib/components/ui/link/link.svelte b/src/lib/components/ui/link/link.svelte
new file mode 100644
index 0000000..c07fb8c
--- /dev/null
+++ b/src/lib/components/ui/link/link.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons/index.js';
+	import { cn } from '$lib/utils.js';
+	import { Button as LinkPrimitive } from 'bits-ui';
+	import { type Events, type Props, link_variants } from './index.js';
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let class_name: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export let href: $$Props['href'];
+	export let builders: $$Props['builders'] = [];
+	export let external: $$Props['external'] = false;
+	export { class_name as class };
+</script>
+
+<LinkPrimitive.Root
+	{builders}
+	class={cn(link_variants({ variant, className: class_name }))}
+	{href}
+	target={external ? '_blank' : undefined}
+	rel={external ? 'noopener noreferrer' : undefined}
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+	{#if external}
+		<Icons.External aria-hidden="true" />
+	{/if}
+</LinkPrimitive.Root>
diff --git a/src/routes/empty-state/informational.svelte b/src/routes/empty-state/informational.svelte
index d9d756f..adaf375 100644
--- a/src/routes/empty-state/informational.svelte
+++ b/src/routes/empty-state/informational.svelte
@@ -2,16 +2,15 @@
 	import { Icons } from '$lib/assets/icons';
 	import { Button } from '$lib/components/ui/button';
 	import { EmptyState } from '$lib/components/ui/empty-state';
+	import { Link } from '$lib/components/ui/link';
 </script>
 
 <EmptyState
+	title="Title"
 	description="This should detail the actions you can take on this screen, as well as why it's valuable."
 	icon={Icons.ChartBarPeak}
 	icon_size={32}
-	title="Title"
 >
 	<Button variant="secondary">Primary Action</Button>
-	<!-- <Link external href="/" variant="secondary">
-        Learn more
-      </Link> -->
+	<Link external href="https://shyakadavis.me/" variant="secondary">Learn more</Link>
 </EmptyState>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 058cc6d..5406c71 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -127,6 +127,16 @@ const config: Config = {
 				900: 'var(--pink-900)',
 				1000: 'var(--pink-1000)'
 			},
+			accents: {
+				1: 'var(--accents-1)',
+				2: 'var(--accents-2)',
+				3: 'var(--accents-3)',
+				4: 'var(--accents-4)',
+				5: 'var(--accents-5)',
+				6: 'var(--accents-6)',
+				7: 'var(--accents-7)',
+				8: 'var(--accents-8)'
+			},
 			'contrast-fg': 'var(--contrast-fg)',
 			'focus-color': 'var(--focus-color)'
 		},