DistributorItem

Props

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

---
import { Image } from 'astro:assets';
import Envelope from 'astro-heroicons/solid/Envelope.astro';
import Phone from 'astro-heroicons/solid/Phone.astro';

import { resolveImage } from '../lib/images';

interface Props {
  imageName?: string;
  title: string;
  email: string;
  phone: string;
}

const { imageName, title, email, phone } = Astro.props;
const image = imageName ? await resolveImage(imageName) : undefined;
---

<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
  {
    image && (
      <div class="flex-shrink-0 lg:min-h-[8rem] lg:flex items-center">
        <Image
          src={image}
          alt={title}
          widths={[400, 840]}
          class="h-auto max-h-72 m-4 w-full object-cover"
        />
      </div>
    )
  }
  <div class="flex-1 bg-white p-4 flex flex-col justify-between">
    <div class="flex-1">
      <div class="block mt-2">
        <p class="text-xl font-semibold text-gray-900">{title}</p>
        <div class="mt-3 text-base text-gray-600 grid gap-2">
          <div class="flex text-base">
            <Envelope class="flex-shrink-0 w-6 h-6" aria-hidden="true" />
            <a
              class="ml-3 text-primary-600 hover:text-primary-500"
              href={`mailto:${email}`}
            >
              {email}
            </a>
          </div>
          <div class="flex text-base">
            <Phone class="flex-shrink-0 w-6 h-6" aria-hidden="true" />
            <a class="ml-3 hover:text-primary-500" href={`tel:${phone}`}>
              {phone}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>