Feature - Typography Mapper tool

src/components/BackLink.astro

@@ -0,0 +1,19 @@
+---
+import { ArrowLeft } from '@lucide/astro'
+
+interface Props {
+  href: string
+  label: string
+}
+
+const { href, label } = Astro.props
+---
+
+<a
+  href={href}
+  class="inline-flex items-center gap-2 text-gray-700 transition-colors hover:text-gray-900"
+>
+  <ArrowLeft class="size-5" />
+
+  <span>{label}</span>
+</a>

src/components/BaseHero.astro

@@ -10,19 +10,21 @@ const { title, description } = Astro.props
 ---
 
 <section class="bg-white">
-  <div
-    class="mx-auto flex max-w-7xl flex-col items-start justify-between gap-8 px-4 py-8 md:flex-row md:py-16"
-  >
-    <div class="max-w-3xl">
-      <slot name="badge" />
+  <div class="mx-auto max-w-7xl space-y-8 px-4 py-8 md:py-16">
+    <slot name="back" />
 
-      <h1 class="text-5xl font-medium text-gray-900">{title}</h1>
+    <div class="flex flex-col items-start justify-between gap-8 md:flex-row">
+      <div class="max-w-3xl space-y-6">
+        <slot name="badge" />
 
-      <p class="mt-6 text-gray-600">
-        {description}
-      </p>
-    </div>
+        <h1 class="text-5xl font-medium text-gray-900">{title}</h1>
+
+        <p class="text-gray-600">
+          {description}
+        </p>
+      </div>
 
-    <BaseAd />
+      <BaseAd />
+    </div>
   </div>
 </section>

src/components/ComponentCard.astro

@@ -3,6 +3,8 @@ import type { CollectionEntry } from 'astro:content'
 
 import { ArrowRight } from '@lucide/astro'
 
+import StatusBadge from './StatusBadge.astro'
+
 interface Props {
   component:
     | CollectionEntry<'application'>['data']
@@ -45,13 +47,6 @@ const isRecentlyUpdated = updated?.date
       />
     </div>
 
-    {
-      isRecentlyUpdated && (
-        <span class="absolute top-3 right-3 inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-2 py-0.5 text-xs font-medium text-gray-600">
-          <span class="size-1 rounded-full bg-green-600" aria-hidden="true" />
-          Updated
-        </span>
-      )
-    }
+    {isRecentlyUpdated && <StatusBadge status="updated" class="absolute top-3 right-3" />}
   </a>
 </li>

src/components/StatusBadge.astro

@@ -0,0 +1,26 @@
+---
+import type { Status } from '../utils/status'
+
+import { getStatusColor, getStatusLabel } from '../utils/status'
+
+interface Props {
+  status: Status
+  class?: string
+}
+
+const { status, class: className } = Astro.props
+
+const dotColor = getStatusColor(status)
+const displayLabel = getStatusLabel(status)
+---
+
+<span
+  class:list={[
+    'inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-2.5 py-0.5 text-xs font-medium text-gray-600',
+    className,
+  ]}
+>
+  <span class={`size-1.5 rounded-full ${dotColor}`} aria-hidden="true"></span>
+
+  {displayLabel}
+</span>

src/components/ToolCard.astro

@@ -0,0 +1,51 @@
+---
+import type { Status } from '../utils/status'
+
+import StatusBadge from './StatusBadge.astro'
+
+interface Props {
+  title: string
+  status: Status
+  description: string
+  href?: string | undefined
+  headingLevel?: 'h2' | 'h3'
+}
+
+const { title, status, description, href, headingLevel = 'h2' } = Astro.props
+
+const cardClasses =
+  'flex h-full flex-col rounded-lg border border-gray-200 bg-white p-6 transition-colors'
+const linkClasses = 'group hover:border-gray-300 hover:bg-gray-50'
+---
+
+{
+  href ? (
+    <a href={href} class={`${cardClasses} ${linkClasses}`}>
+      <div class="mb-2 flex items-start justify-between gap-4">
+        {headingLevel === 'h2' ? (
+          <h2 class="text-lg font-medium text-gray-900 group-hover:text-gray-700">{title}</h2>
+        ) : (
+          <h3 class="text-lg font-medium text-gray-900 group-hover:text-gray-700">{title}</h3>
+        )}
+
+        <StatusBadge {status} />
+      </div>
+
+      <p class="text-sm text-gray-600">{description}</p>
+    </a>
+  ) : (
+    <div class={cardClasses}>
+      <div class="mb-2 flex items-start justify-between gap-4">
+        {headingLevel === 'h2' ? (
+          <h2 class="text-lg font-medium text-gray-900">{title}</h2>
+        ) : (
+          <h3 class="text-lg font-medium text-gray-900">{title}</h3>
+        )}
+
+        <StatusBadge {status} />
+      </div>
+
+      <p class="text-sm text-gray-600">{description}</p>
+    </div>
+  )
+}

src/components/TooltipWrapper.astro

@@ -2,17 +2,21 @@
 interface Props {
   text: string
   class?: string
+  tooltipClass?: string
 }
 
-const { text, class: className } = Astro.props
+const { text, class: className, tooltipClass } = Astro.props
 ---
 
 <span class:list={['group/tooltip relative inline-flex items-center', className]}>
   <slot />
 
   <span
     aria-hidden="true"
-    class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-focus-within/tooltip:opacity-100 group-hover/tooltip:opacity-100"
+    class:list={[
+      'pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded bg-gray-900 px-2 py-1 text-xs text-white opacity-0 transition-opacity group-focus-within/tooltip:opacity-100 group-hover/tooltip:opacity-100',
+      tooltipClass ?? 'whitespace-nowrap',
+    ]}
   >
     {text}
     <span