ProseItem

Props

Source apps/www/src/sections/ProseItem.astro @ gitt.one

---
/**
 * ProseItem — a titled sub-section inside <Prose>: a subheading, markdown, an
 *   optional picture and an optional button. Several of them stack inside ONE
 *   section with a normal vertical rhythm.
 *
 * Use for: an "about" page with three themes, a certification page with one
 *   block per certificate, a services description — anything that would
 *   otherwise become a run of separate sections.
 * Parent: <Prose> only (usually <Prose heading="left">).
 * Children: markdown between the tags.
 * Picture: `image` (file name in images/) is shown under the text of this
 *   item.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
import Button from './_Button.astro';

interface Props {
  /** the subheading */
  title?: string;
  /** file name in images/, shown under the text */
  image?: string;
  /** text of a button under the item; shown only with href */
  linkText?: string;
  /** link of that button */
  href?: string;
}

const { title, image, linkText, href } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

<article class="not-prose mt-10 first:mt-0">
  {title && <h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl [.bg-stone-800_&]:text-white">{title}</h3>}
  <div class="prose prose-gray mt-3 max-w-none text-gray-500 [.bg-stone-800_&]:text-gray-300">
    <slot />
  </div>
  {img && <Image src={img} alt={title ?? ''} widths={[400, 840]} class="mt-6 w-full max-w-2xl rounded-lg shadow-lg" />}
  {linkText && href && <p class="mt-6"><Button href={href}>{linkText}</Button></p>}
</article>