Product

Props

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

---
/**
 * Product — one item of <Products>: name, kicker, description, features,
 * picture, link to the product page.
 */
import { Image } from 'astro:assets';
import Check from 'astro-heroicons/outline/Check.astro';
import ChevronRight from 'astro-heroicons/outline/ChevronRight.astro';
import { resolveImage } from '../lib/images';
import Button from './_Button.astro';

interface Props {
  name: string;
  kicker?: string;
  description?: string;
  features?: string[];
  image?: string;
  href?: string;
  linkText?: string;
}
const { name, kicker, description, features = [], image, href, linkText } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

{/* list row */}
<div class="py-8 [div[data-variant=cards]_&]:hidden md:py-12 xl:grid xl:grid-cols-3 xl:gap-x-8">
  <div>
    {kicker && <p class="text-base font-semibold uppercase tracking-wide text-primary-600">{kicker}</p>}
    <h3 class="mt-2 text-3xl font-extrabold text-gray-900">{name}</h3>
    {description && <p class="mt-4 text-lg text-gray-500">{description}</p>}
    <slot />
    {href && linkText && <p class="mt-4"><Button href={href}>{linkText}<ChevronRight class="ml-1 h-5 w-5" aria-hidden="true" /></Button></p>}
  </div>
  <div class="mt-4 md:grid md:grid-cols-2 md:gap-x-8 xl:col-span-2 xl:mt-0">
    {features.length > 0 && (
      <ul class="list-none divide-y divide-gray-200">
        {features.map((f) => <li class="flex py-4"><Check class="h-6 w-6 flex-shrink-0 text-green-500" aria-hidden="true" /><span class="ml-3 text-base text-gray-500">{f}</span></li>)}
      </ul>
    )}
    {img && <Image src={img} alt={name} widths={[400, 840]} class="mt-4 h-full max-h-80 w-full object-cover object-center md:mt-0" />}
  </div>
</div>

{/* card */}
<div class="flex flex-col overflow-hidden rounded-lg border-2 border-solid border-gray-900 bg-white text-gray-900 shadow-lg [div[data-variant=list]_&]:hidden">
  {img && <Image src={img} alt={name} widths={[400, 840]} class="h-48 w-full object-cover" />}
  <div class="px-6 py-8 text-center sm:p-10 sm:pb-6">
    {kicker && <p class="text-sm font-semibold uppercase tracking-wide text-primary-600">{kicker}</p>}
    <h3 class="text-3xl font-bold">{name}</h3>
  </div>
  <div class="flex flex-1 flex-col justify-between space-y-6 bg-gray-50 px-6 pb-8 pt-6 sm:p-10 sm:pt-6">
    {description && <p class="flex text-base text-gray-700"><Check class="h-6 w-6 flex-shrink-0 text-green-500" aria-hidden="true" /><span class="ml-3">{description}</span></p>}
    {features.length > 0 && <ul class="list-none space-y-2 text-base text-gray-700">{features.map((f) => <li class="flex"><Check class="h-6 w-6 flex-shrink-0 text-green-500" aria-hidden="true" /><span class="ml-3">{f}</span></li>)}</ul>}
    <slot />
    {href && linkText && <div class="rounded-md shadow [&>a]:w-full"><Button href={href}>{linkText}</Button></div>}
  </div>
</div>