Initial Commit

src/components/cards/InterestCard.astro

@@ -0,0 +1,57 @@
+---
+/**
+ * InterestCard.astro
+ * ---------------------------------------------------------------------------
+ * Generic highlight card used across interest pages (the spec's "Highlights
+ * (Card Grid)" sections). Each card: an mdi icon, a bold title, and a body.
+ * Spec emojis in the highlight tables are mapped to mdi icon names at the call
+ * site.
+ *
+ * Optional `currently` prop restyles the card as a "what's active now" item
+ * with a pulse dot, matching the spec's "Currently" sections.
+ */
+import Icon from '@components/Icon.astro';
+
+interface Props {
+  icon: string;
+  title: string;
+  /** Optional small status pill text, e.g. "Complete", "Reading". */
+  status?: string;
+  currently?: boolean;
+  class?: string;
+}
+
+const { icon, title, status, currently = false, class: className = '' } = Astro.props;
+---
+
+<article
+  class:list={[
+    'card card-interactive flex h-full flex-col gap-3',
+    className,
+  ]}
+>
+  <div class="flex items-center justify-between gap-3">
+    <span
+      class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl"
+      style={currently
+        ? 'background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent);'
+        : 'background: color-mix(in srgb, var(--color-secondary) 18%, transparent); color: var(--color-secondary);'}
+      aria-hidden="true"
+    >
+      <Icon name={icon} class="h-6 w-6" />
+    </span>
+    {currently && (
+      <span class="inline-flex items-center gap-1.5 font-mono text-[0.65rem] uppercase tracking-[0.18em]" style="color: var(--color-accent);">
+        <span class="h-2 w-2 rounded-full animate-pulse-glow" style="background: var(--color-accent);"></span>
+        Active
+      </span>
+    )}
+    {status && !currently && (
+      <span class="pill">{status}</span>
+    )}
+  </div>
+  <h3 class="font-sans text-lg" style="color: var(--color-text);">{title}</h3>
+  <div class="grow text-sm leading-relaxed" style="color: var(--color-text-muted);">
+    <slot />
+  </div>
+</article>