Logopopular

Props

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

---
/**
 * Logo — one item of <Logos> (a row) or of <LogoCards> (a card with a name
 * and contacts).
 *
 * On a dark band the logo is painted white: client marks are dark ink on a
 * transparent background, so on <Logos theme="dark"> they would otherwise
 * disappear. `brightness-0 invert` turns any of them into a white silhouette,
 * which is what a logo row on a dark background does everywhere.
 */
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 {
  image?: string;
  title?: string;
  href?: string;
  email?: string;
  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>