Logopopular

Props

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

---
/**
 * Logo — one item of <Logos> (a bare logo in a row) or of <LogoCards> (a card
 *   with a name and contacts).
 *
 * Parent: <Logos> or <LogoCards>. The shape follows the props: with `email` or
 *   `phone` it becomes a card, otherwise it is a logo only.
 * Picture: `image` (file name in images/) — a logo file, ideally SVG or PNG
 *   with a transparent background; on a dark band it is painted white.
 * Link: `href` wraps the logo in a link.
 */
import { Image } from 'astro:assets';
import Envelope from 'astro-heroicons/outline/Envelope.astro';
import Phone from 'astro-heroicons/outline/Phone.astro';
import { resolveImage } from '../lib/images';

interface Props {
  /** file name in images/, the logo */
  image?: string;
  /** the company name: the alt text of the logo, the heading of a card */
  title?: string;
  /** a link the logo leads to */
  href?: string;
  /** e-mail, shown on a card with an icon */
  email?: string;
  /** phone, shown on a card with an icon */
  phone?: string;
}
const { image, title, href, email, phone } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
const card = Boolean(email || phone);
---

<li class:list={['flex', card ? 'flex-col overflow-hidden rounded-lg bg-white shadow-lg' : 'h-12 items-center justify-center']}>
  {img && (href ? (
    <a href={href} class="contents"><Image src={img} alt={title ?? ''} height={card ? 160 : 48} densities={[1, 2]} class:list={[card ? 'm-4 h-auto max-h-40 w-auto self-center object-contain' : 'max-h-12 w-auto max-w-[180px] object-contain', !card && '[.bg-stone-800_&]:brightness-0 [.bg-stone-800_&]:invert [.bg-gradient-to-r_&]:brightness-0 [.bg-gradient-to-r_&]:invert']} /></a>
  ) : (
    <Image src={img} alt={title ?? ''} height={card ? 160 : 48} densities={[1, 2]} class:list={[card ? 'm-4 h-auto max-h-40 w-auto self-center object-contain' : 'max-h-12 w-auto max-w-[180px] object-contain', !card && '[.bg-stone-800_&]:brightness-0 [.bg-stone-800_&]:invert [.bg-gradient-to-r_&]:brightness-0 [.bg-gradient-to-r_&]:invert']} />
  ))}
  {card && (
    <div class="flex-1 p-4 text-gray-900">
      <p class="text-xl font-semibold">{title}</p>
      <div class="mt-3 grid gap-2 text-base text-gray-600">
        {email && <a class="flex items-center text-primary-700 hover:text-primary-600" href={`mailto:${email}`}><Envelope class="h-6 w-6 flex-shrink-0" aria-hidden="true" /><span class="ml-3">{email}</span></a>}
        {phone && <a class="flex items-center hover:text-primary-600" href={`tel:${phone}`}><Phone class="h-6 w-6 flex-shrink-0" aria-hidden="true" /><span class="ml-3">{phone}</span></a>}
      </div>
    </div>
  )}
</li>