PriceItem

Props

Source apps/www/src/components/PriceItem.astro @ gitt.one

---
import CheckCircle from 'astro-heroicons/solid/CheckCircle.astro';

interface Props {
  title: string;
  description?: string;
  featuresTitle?: string;
  features?: string[];
  priceTitle: string;
  price: string;
  currency?: string;
  linkText?: string;
  linkPath?: string;
  buttonText?: string;
  buttonPath?: string;
}

const {
  title,
  description,
  featuresTitle,
  features,
  priceTitle,
  price,
  currency,
  linkText,
  linkPath,
  buttonText,
  buttonPath,
} = Astro.props;

const showFeatures = Boolean(featuresTitle && features && features.length > 0);
---

<div class="relative">
  <div class="absolute inset-0 h-1/2 bg-gray-100"></div>
  <div class="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div
      class="mx-auto max-w-lg overflow-hidden rounded-lg shadow-lg lg:flex lg:max-w-none"
    >
      <div class="flex-1 bg-white px-6 py-8 lg:p-12">
        <h3 class="text-2xl font-extrabold text-gray-900 sm:text-3xl">
          {title}
        </h3>
        {description && <p class="mt-6 text-base text-gray-500">{description}</p>}
        {
          showFeatures && (
            <div class="mt-8">
              <div class="flex items-center">
                <h4 class="flex-shrink-0 bg-white pr-4 text-sm font-semibold uppercase tracking-wider text-primary-700">
                  {featuresTitle}
                </h4>
                <div class="flex-1 border-t-2 border-gray-200" />
              </div>
              <ul
                role="list"
                class="mt-8 list-none space-y-5 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5 lg:space-y-0"
              >
                {features!.map((feature) => (
                  <li class="flex items-start lg:col-span-1">
                    <div class="flex-shrink-0">
                      <CheckCircle
                        class="h-5 w-5 text-primary-400"
                        aria-hidden="true"
                      />
                    </div>
                    <p class="ml-3 text-sm text-gray-700">{feature}</p>
                  </li>
                ))}
              </ul>
            </div>
          )
        }
      </div>
      <div
        class="bg-gray-50 px-6 py-8 text-center lg:flex lg:flex-shrink-0 lg:flex-col lg:justify-center lg:p-12"
      >
        <p class="text-lg font-medium leading-6 text-gray-900">{priceTitle}</p>
        <div
          class="mt-4 flex items-center justify-center text-5xl font-extrabold text-gray-900"
        >
          <span>{price}</span>
          {
            currency && (
              <span class="ml-3 text-xl font-medium text-gray-500">
                {currency}
              </span>
            )
          }
        </div>
        {
          linkText && linkPath && (
            <p class="mt-4 text-sm">
              <a href={linkPath} class="font-medium text-gray-500 underline">
                {linkText}
              </a>
            </p>
          )
        }
        {
          buttonText && buttonPath && (
            <div class="mt-6">
              <div class="rounded-md shadow">
                <a
                  href={buttonPath}
                  class="flex items-center justify-center rounded-md border border-transparent bg-gradient-to-r from-primary-600 to-primary-alt-700 px-5 py-3 text-base font-medium text-white hover:from-primary-700 hover:to-primary-alt-800"
                >
                  {buttonText}
                </a>
              </div>
            </div>
          )
        }
      </div>
    </div>
  </div>
</div>