Should be mostly working, doing some additional QOL

fictionarchive-web-astro/src/lib/components/NavigationCard.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import type { Component } from 'svelte';
+
+	export interface NavigationCardProps {
+		href: string;
+		icon: Component<{ class?: string }>;
+		title: string;
+		description: string;
+		disabled?: boolean;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	let {
+		href,
+		icon: Icon,
+		title,
+		description,
+		disabled = false,
+		class: className
+	}: NavigationCardProps = $props();
+</script>
+
+{#if disabled}
+	<div
+		class={cn(
+			'flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
+			'cursor-not-allowed opacity-50',
+			className
+		)}
+	>
+		<div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-muted">
+			<Icon class="h-6 w-6 text-muted-foreground" />
+		</div>
+		<div class="flex flex-col gap-1">
+			<span class="text-xl font-semibold">{title}</span>
+			<span class="text-sm text-muted-foreground">{description}</span>
+		</div>
+		<span
+			class="ml-auto rounded-full bg-muted px-3 py-1 text-xs font-medium text-muted-foreground"
+		>
+			Coming soon
+		</span>
+	</div>
+{:else}
+	<a
+		{href}
+		class={cn(
+			'group flex w-full items-center gap-4 rounded-2xl border bg-card px-6 py-5',
+			'shadow-sm transition-all duration-200',
+			'hover:shadow-lg hover:border-primary/20',
+			className
+		)}
+	>
+		<div
+			class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 transition-colors group-hover:bg-primary/20"
+		>
+			<Icon class="h-6 w-6 text-primary" />
+		</div>
+		<div class="flex flex-col gap-1">
+			<span class="text-xl font-semibold">{title}</span>
+			<span class="text-sm text-muted-foreground">{description}</span>
+		</div>
+		<svg
+			class="ml-auto h-5 w-5 text-muted-foreground transition-transform group-hover:translate-x-1"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="m9 18 6-6-6-6" />
+		</svg>
+	</a>
+{/if}