CertificationBlockquoteItem

Props

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

---
import { Image } from 'astro:assets';

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

interface Props {
  text: string;
  imageName?: string;
  author?: string;
  authorJob?: string;
  authorImageName?: string;
}

const { text, imageName, author, authorJob, authorImageName } = Astro.props;
const image = imageName ? await resolveImage(imageName) : undefined;
const authorImage = authorImageName ? await resolveImage(authorImageName) : undefined;
---

<div class="mt-12 relative text-base max-w-prose mx-auto lg:mt-0 lg:max-w-none">
  <blockquote class="relative bg-white rounded-lg shadow-lg">
    <div class="rounded-t-lg px-6 py-8 sm:px-10 sm:pt-10 sm:pb-8">
      {
        image && (
          <Image
            src={image}
            alt=""
            widths={[400, 840]}
            class="rounded-lg shadow-lg object-cover object-center w-full max-h-8 h-full"
          />
        )
      }
      <div class="relative text-lg text-gray-700 font-medium mt-8">
        <svg
          class="absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-gray-200"
          fill="currentColor"
          viewBox="0 0 32 32"
          aria-hidden="true"
        >
          <path
            d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z"
          ></path>
        </svg>
        <p class="relative">{text}</p>
      </div>
    </div>
    <cite
      class="relative flex items-center sm:items-start bg-gray-800 rounded-b-lg not-italic py-5 px-6 sm:py-5 sm:pl-12 sm:pr-10 sm:mt-10"
    >
      <div
        class="relative rounded-full border-2 border-white sm:absolute sm:top-0 sm:transform sm:-translate-y-1/2"
      >
        {
          authorImage && (
            <Image
              src={authorImage}
              alt={author ?? ''}
              widths={[400, 840]}
              class="w-12 h-12 sm:w-20 sm:h-20 rounded-full object-cover object-center"
            />
          )
        }
      </div>
      <span class="relative ml-4 text-gray-300 font-semibold leading-6 sm:ml-24 sm:pl-1">
        <span class="text-white font-semibold sm:inline">{author}</span>{' '}
        <span class="sm:inline">{authorJob}</span>
      </span>
    </cite>
  </blockquote>
</div>