Testimonial

Props

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

---
/**
 * Testimonial — one card of <Testimonials>: a round photo, the name, the role
 *   and the quote.
 *
 * Parent: <Testimonials> only.
 * Text: `quote` is the text; markdown between the tags is rendered after it
 *   (or instead of it).
 * Picture: `avatar` (file name in images/) is cropped to a circle — a
 *   portrait, face centered.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';

interface Props {
  /** who is speaking */
  name: string;
  /** their role or company */
  role?: string;
  /** the words; markdown children are an alternative */
  quote?: string;
  /** file name in images/, a portrait cropped to a circle */
  avatar?: string;
  /** file name in images/; accepted for symmetry with <Quote>, not shown in this shape */
  logo?: string;
}
const { name, role, quote, avatar, logo } = Astro.props;
const avatarImg = avatar ? await resolveImage(avatar) : undefined;
const logoImg = logo ? await resolveImage(logo) : undefined;
---

<li class="rounded-lg bg-primary-900/40 px-4 py-8 text-center xl:px-8 xl:text-left">
  {avatarImg && <Image src={avatarImg} alt="" widths={[400]} class="mx-auto h-40 w-40 rounded-full object-cover xl:h-44 xl:w-44" />}
  <div class="mt-4 space-y-1 text-lg">
    <h3 class="text-2xl font-medium text-white">{name}</h3>
    {role && <p class="text-xl font-medium text-primary-200">{role}</p>}
    {quote && <p class="text-xl text-gray-300">{quote}</p>}
    <slot />
  </div>
</li>