component: error (#13)

Co-authored-by: Davis SHYAKA <[email protected]>

src/lib/assets/icons/index.ts

@@ -46,6 +46,7 @@ import Router from './router.svg?component';
 import SettingsSliders from './settings-sliders.svg?component';
 import Shield from './shield.svg?component';
 import Status from './status.svg?component';
+import Stop from './stop.svg?component';
 import Tabs from './tabs.svg?component';
 import ThemeSwitchDark from './theme-switch-dark.svg?component';
 import ThemeSwitchLight from './theme-switch-light.svg?component';
@@ -100,6 +101,7 @@ export const Icons = {
 	SettingsSliders,
 	Shield,
 	Status,
+	Stop,
 	Tabs,
 	ThemeSwitchDark,
 	ThemeSwitchLight,

src/lib/components/shared/page-wrapper.svelte

@@ -21,7 +21,7 @@
 			>
 				{title}
 			</h1>
-			<p class="text-base text-gray-900 sm:text-lg md:text-xl">
+			<p class="text-base tracking-tight text-gray-900 sm:text-lg md:text-xl">
 				{description}
 			</p>
 		</section>

src/lib/components/ui/empty-state/empty-state.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '$lib/utils.js';
-	import { type Props, badge_variants } from './index.js';
+	import { type Props, empty_state_variants } from './index.js';
 
 	type $$Props = Props;
 
@@ -15,7 +15,7 @@
 	$: icon_parent_size = icon_size ? icon_size + 28 : 32;
 </script>
 
-<div class={cn(badge_variants({ variant, className: class_name }))} {...$$restProps}>
+<div class={cn(empty_state_variants({ variant, className: class_name }))} {...$$restProps}>
 	{#if icon}
 		<span
 			class="grid place-items-center rounded-lg border border-gray-alpha-400 bg-background-100 p-[14px]"

src/lib/components/ui/empty-state/index.ts

@@ -3,15 +3,15 @@ import { type VariantProps, tv } from 'tailwind-variants';
 
 export { default as EmptyState } from './empty-state.svelte';
 
-export const badge_variants = tv({
+export const empty_state_variants = tv({
 	base: 'grid place-items-center gap-4 text-gray-900',
 	variants: {
 		variant: {}
 	},
 	defaultVariants: {}
 });
 
-type Variant = VariantProps<typeof badge_variants>['variant'];
+type Variant = VariantProps<typeof empty_state_variants>['variant'];
 
 export type Props = {
 	variant?: Variant;

src/lib/components/ui/error/error.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons/index.js';
+	import { cn } from '$lib/utils.js';
+	import { Link } from '../link/index.js';
+	import { type Props, error_variants } from './index.js';
+
+	type $$Props = Props;
+
+	let class_name: string | undefined | null = undefined;
+	export let size: $$Props['size'] = 'md';
+	export let label: $$Props['label'] = undefined;
+	export let error: $$Props['error'] = undefined;
+	export { class_name as class };
+</script>
+
+<p class={cn(error_variants({ size, className: class_name }))} {...$$restProps}>
+	<Icons.Stop aria-hidden="true" class="size-4" />
+	{#if error}
+		<span>{error.message}</span>
+		<span>
+			<Link
+				href={error.link}
+				external={error.link.startsWith('https')}
+				class="font-medium underline underline-offset-4 hover:opacity-70"
+			>
+				{error.action}
+			</Link>
+		</span>
+	{:else}
+		{#if label}
+			<b>{label}:</b>
+		{/if}
+		<slot></slot>
+	{/if}
+</p>

src/lib/components/ui/error/index.ts

@@ -0,0 +1,29 @@
+import { type VariantProps, tv } from 'tailwind-variants';
+
+export { default as Error } from './error.svelte';
+
+export const error_variants = tv({
+	base: 'inline-flex items-center gap-2 break-words text-red-900',
+	variants: {
+		size: {
+			sm: 'text-[13px] font-normal',
+			md: 'text-sm font-normal',
+			lg: 'text-base font-medium'
+		}
+	},
+	defaultVariants: {
+		size: 'md'
+	}
+});
+
+type Size = VariantProps<typeof error_variants>['size'];
+
+export type Props = {
+	size?: Size;
+	label?: string;
+	error?: {
+		message: string;
+		action: string;
+		link: string;
+	};
+};

src/lib/components/ui/link/link.svelte

@@ -20,7 +20,7 @@
 	class={cn(link_variants({ variant, className: class_name }))}
 	{href}
 	target={external ? '_blank' : undefined}
-	rel={external ? 'noopener noreferrer' : undefined}
+	rel={external ? 'noopener' : undefined}
 	{...$$restProps}
 	on:click
 	on:keydown

src/lib/config/sitemap.ts

@@ -125,7 +125,7 @@ export const aside_items: Aside = {
 		{
 			title: 'Error',
 			href: '/error',
-			status: 'soon'
+			status: 'draft'
 		},
 		{
 			title: 'Feedback',

src/routes/error/+page.svelte

@@ -1 +1,32 @@
-<h1>error</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import CustomLabel from './custom-label.svelte';
+	import custom_label_code from './custom-label.svelte?raw';
+	import Default from './default.svelte';
+	import default_code from './default.svelte?raw';
+	import Sizes from './sizes.svelte';
+	import sizes_code from './sizes.svelte?raw';
+	import WithAnErrorProperty from './with-an-error-property.svelte';
+	import with_an_error_property_code from './with-an-error-property.svelte?raw';
+
+	export let data;
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="default" code={default_code}>
+		<Default />
+	</Demo>
+
+	<Demo id="custom-label" code={custom_label_code}>
+		<CustomLabel />
+	</Demo>
+
+	<Demo id="sizes" code={sizes_code}>
+		<Sizes />
+	</Demo>
+
+	<Demo id="with-an-error-property" code={with_an_error_property_code}>
+		<WithAnErrorProperty />
+	</Demo>
+</PageWrapper>

src/routes/error/+page.ts

@@ -0,0 +1,22 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Error';
+	const description =
+		'Good error design is clear, useful, and friendly. Designing concise and accurate error messages unblocks users and builds trust by meeting people where they are.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}

src/routes/error/custom-label.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { Error } from '$lib/components/ui/error';
+</script>
+
+<Error label="Email Error">This email address is already in use.</Error>

src/routes/error/default.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { Error } from '$lib/components/ui/error';
+</script>
+
+<Error>This email address is already in use.</Error>

src/routes/error/sizes.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Error } from '$lib/components/ui/error';
+</script>
+
+<div class="flex items-center gap-4">
+	<Error size="sm">This email is in use.</Error>
+	<Error>This email is in use.</Error>
+	<Error size="lg">This email is in use.</Error>
+</div>

src/routes/error/with-an-error-property.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Error } from '$lib/components/ui/error';
+</script>
+
+<Error
+	error={{
+		message: 'The request failed.',
+		action: 'Contact Us',
+		link: 'https://shyakadavis.me'
+	}}
+/>