astro-better-cards 0.1.0

package/Card.astro

@@ -0,0 +1,44 @@
+---
+const {
+  href,
+  title,
+  description,
+  icon,
+  darkIcon,
+  cardImage,
+  variant = 'full',
+  comingSoon = false,
+  label,
+  labelFirst = false,
+} = Astro.props;
+---
+{variant === 'full' && (
+  <a href={href} class="border border-slate-300 dark:bg-slate-900 bg-white border-solid block dark:hover:bg-slate-700 dark:border-slate-600 group hover:bg-slate-300 hover:border-indigo-500 dark:hover:border-indigo-600 rounded-lg overflow-hidden">
+    {cardImage && <img src={cardImage} class="w-full object-cover" alt="" aria-hidden="true" />}
+    <div class="flex items-start gap-x-6 p-5">
+      {icon && <img class:list={["block w-14 shrink-0", darkIcon ? "dark:hidden" : ""]} src={icon} alt="" aria-hidden="true" />}
+      {darkIcon && <img class="hidden dark:block w-14 shrink-0" src={darkIcon} alt="" aria-hidden="true" />}
+      <div>
+        <p class="font-bold group-hover:text-indigo-500 pb-1 text-xl sm:leading-tight sm:pb-2 sm:text-lg md:text-xl lg:text-2xl 2xl:leading-tight" set:html={title}></p>
+        {description && <p class="font-normal lg:leading-4 sm:leading-4 text-sm">{description}</p>}
+      </div>
+    </div>
+  </a>
+)}
+{variant === 'compact' && (
+  <a href={href} class="border border-solid block rounded-lg border-slate-200 dark:bg-slate-900 dark:border-slate-800 bg-white dark:hover:bg-slate-800 dark:hover:border-indigo-500 group hover:bg-slate-100 hover:border-indigo-500">
+    <div class="flex items-center gap-x-6 px-5 py-3">
+      {!labelFirst && label && <p class="basis-7 shrink-0">{label}</p>}
+      <p class={(labelFirst ? "text-right " : "text-left ") + "basis-full font-medium group-hover:text-indigo-500 sm:leading-tight text-md 1xl:leading-tight"} set:html={title}></p>
+      {labelFirst && label && <p class="basis-7 shrink-0">{label}</p>}
+    </div>
+  </a>
+)}
+{variant === 'quickstart' && (
+  <a href={href} class={"border border-solid block rounded-lg " + (comingSoon ? "border-slate-800 dark:border-slate-700" : "border-slate-200 dark:bg-slate-900 dark:border-slate-800 bg-white dark:hover:bg-slate-800 dark:hover:border-indigo-500 group hover:bg-slate-100 hover:border-indigo-500")}>
+    <div class="flex items-center gap-x-6 px-5 py-3">
+      {icon && <img class={"h-9 shrink-0" + (comingSoon ? " opacity-40" : "")} src={icon} alt="" aria-hidden="true" />}
+      <p class={"font-medium group-hover:text-indigo-500 sm:leading-tight text-sm 1xl:leading-tight " + (comingSoon ? "text-slate-400" : "")} set:html={comingSoon ? title + ' * Coming Soon' : title}></p>
+    </div>
+  </a>
+)}

package/README.md

@@ -0,0 +1,72 @@
+# astro-better-cards
+
+Clickable card components for Astro docs sites. Three variants: `full` (large card with optional image/icon), `compact` (nav row with optional label), and `quickstart` (small icon + title, with coming-soon support).
+
+## Install
+
+```
+npm install astro-better-cards
+```
+
+## Usage
+
+```mdx
+import Card from 'astro-better-cards/Card.astro';
+```
+
+### full (default)
+
+Large bordered card. Good for section index pages.
+
+```mdx
+<Card href="/docs/section" title="Section Title" description="A short description." />
+```
+
+With an icon:
+
+```mdx
+<Card href="/docs/section" title="Section Title" icon="/img/icon.svg" darkIcon="/img/icon-dark.svg" />
+```
+
+With a card image (displayed above the content):
+
+```mdx
+<Card href="/docs/section" title="Section Title" cardImage="/img/banner.png" />
+```
+
+### compact
+
+Small nav row, often used for prev/next links. The `label` prop renders a short badge (e.g. an arrow). `labelFirst` controls which side the label appears on.
+
+```mdx
+<Card variant="compact" href="/docs/next-page" title="Next Page" label="->" labelFirst={true} />
+<Card variant="compact" href="/docs/prev-page" title="Previous Page" label="<-" labelFirst={false} />
+```
+
+### quickstart
+
+Small icon + title card for quickstart grids. Supports a `comingSoon` state that greys out the card.
+
+```mdx
+<Card variant="quickstart" href="/docs/quickstart/react" title="React" icon="/img/react.svg" />
+<Card variant="quickstart" href="" title="Vue" icon="/img/vue.svg" comingSoon={true} />
+```
+
+## Props
+
+| Prop | Variants | Type | Default | Description |
+|------|----------|------|---------|-------------|
+| `href` | all | `string` | — | Link destination. |
+| `title` | all | `string` | — | Card title. Rendered with `set:html` so HTML entities and inline markup work. |
+| `variant` | all | `'full' \| 'compact' \| 'quickstart'` | `'full'` | Which card style to render. |
+| `description` | `full` | `string` | — | Optional subtitle below the title. |
+| `icon` | `full`, `quickstart` | `string` | — | Icon image URL. Hidden in dark mode when `darkIcon` is also set. |
+| `darkIcon` | `full` | `string` | — | Dark-mode icon image URL. |
+| `cardImage` | `full` | `string` | — | Banner image displayed above the card content. |
+| `label` | `compact` | `string` | — | Short badge text (e.g. `"->"`, `"<-"`, a step number). |
+| `labelFirst` | `compact` | `boolean` | `false` | When `true`, the label appears after the title (right-aligned). |
+| `comingSoon` | `quickstart` | `boolean` | `false` | Greys out the card and appends `* Coming Soon` to the title. |
+
+## Styling
+
+Cards use Tailwind CSS utility classes and respond to dark mode via the `dark:` variant. No Tailwind integration is required in your project -- classes are inlined in the component.

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "astro-better-cards",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    "./Card.astro": "./Card.astro"
+  },
+  "peerDependencies": {
+    "astro": ">=4.0.0"
+  },
+  "keywords": ["astro", "cards", "docs", "navigation"],
+  "license": "MIT"
+}