From 06a129a5603c84a8d56e625b298c1dd418bf05e5 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Mon, 17 Nov 2025 20:32:06 +0100
Subject: [PATCH] feat: add ActionCard component

---
 .../components/molecules/ActionCard.svelte    | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/lib/components/molecules/ActionCard.svelte

diff --git a/src/lib/components/molecules/ActionCard.svelte b/src/lib/components/molecules/ActionCard.svelte
new file mode 100644
index 0000000..225366a
--- /dev/null
+++ b/src/lib/components/molecules/ActionCard.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Heading from '../atoms/Heading.svelte';
+
+	type Props = {
+		title: string;
+		description?: string;
+		backgroundColor?: string;
+		onClick: () => void;
+	};
+
+	let { title, description, backgroundColor = '#333333', onClick }: Props = $props();
+</script>
+
+<div
+	role="button"
+	tabindex="0"
+	class={`inline-block cursor-pointer rounded-2xl p-4 shadow-sm transition-all duration-200 ease-in-out hover:shadow-md md:p-6`}
+	style:background-color={backgroundColor}
+	onclick={onClick}
+	onkeydown={(e) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onClick();
+		}
+	}}
+>
+	<Heading size="small" spacing="none">
+		{title}
+	</Heading>
+	{#if description}
+		<p class="text-sm text-gray-600">{description}</p>
+	{/if}
+</div>