PlanItem

Props

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

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

interface Props {
  name: string;
  price: number | string;
  recommended?: boolean;
  description?: string;
  ramCapacity?: string;
  coresAmount?: string;
  ssdCapacity?: string;
  callToAction?: string;
  callToActionPath?: string;
}

const {
  name,
  price,
  recommended = false,
  description,
  ramCapacity,
  coresAmount,
  ssdCapacity,
  callToAction,
  callToActionPath = '/#contacts',
} = Astro.props;

const features = [
  ramCapacity && `${ramCapacity} RAM`,
  coresAmount && `${coresAmount} CPU`,
  ssdCapacity && `${ssdCapacity} SSD`,
].filter(Boolean) as string[];
---

<div
  class:list={[
    'relative flex flex-col rounded-2xl border bg-white p-8 shadow-sm',
    recommended ? 'border-primary-500' : 'border-gray-200',
  ]}
>
  <div class="flex-1">
    <h3 class="text-xl font-semibold text-gray-900">{name}</h3>
    {
      recommended && (
        <p class="absolute top-0 -translate-y-1/2 rounded-full bg-primary-600 px-4 py-1.5 text-xs font-semibold uppercase tracking-wide text-white">
          Most popular
        </p>
      )
    }
    <p class="mt-4 flex items-baseline text-gray-900">
      <span class="text-5xl font-extrabold tracking-tight">${price}</span>
      <span class="ml-1 text-xl font-semibold">Per month</span>
    </p>
    {description && <p class="mt-6 text-gray-500">{description}</p>}

    {
      features.length > 0 && (
        <ul role="list" class="mt-6 list-none space-y-6">
          {features.map((feature) => (
            <li class="flex">
              <Check
                class="h-6 w-6 flex-shrink-0 text-primary-500"
                aria-hidden="true"
              />
              <span class="ml-3 text-gray-500">{feature}</span>
            </li>
          ))}
        </ul>
      )
    }
  </div>

  {
    callToAction && (
      <a
        href={callToActionPath}
        class:list={[
          'mt-8 block w-full rounded-md border border-transparent px-6 py-3 text-center font-medium',
          recommended
            ? 'bg-primary-600 text-white hover:bg-primary-700'
            : 'bg-primary-50 text-primary-700 hover:bg-primary-100',
        ]}
      >
        {callToAction}
      </a>
    )
  }
</div>