`src/components/Wordmark.tsx`

45 lines
/**
 * Wordmark — text-based brand mark, rename-safe.
 *
 * Handles two shapes:
 *   - "pastdoor"     → single token, with an accent-colored period after
 *   - "parcel.la"    → split-on-dot, TLD styled as locational suffix
 *
 * `accent` defaults to coral (legacy) but each surface passes its
 * themeAccent color so the wordmark is a per-host signature, not a
 * shared coral dot across all three sister sites.
 */
import { SITE_NAME } from '@/lib/site';

export function Wordmark({
  name = SITE_NAME,
  className = '',
  accent,
}: {
  name?: string;
  className?: string;
  accent?: string;
}) {
  const accentStyle = accent ? { color: accent } : undefined;

  if (name.includes('.')) {
    const [head, tld] = name.split('.');
    return (
      <span className={`font-display text-2xl tracking-[-0.01em] lowercase text-ink ${className}`}>
        {head}
        <span className={accent ? 'mx-[0.05em]' : 'mx-[0.05em] text-coral'} style={accentStyle} aria-hidden>·</span>
        <span className="font-sans font-medium text-sm uppercase tracking-[0.15em] text-ink/70 ml-0.5 align-[0.15em]">
          {tld}
        </span>
      </span>
    );
  }

  return (
    <span className={`font-display text-2xl tracking-[-0.01em] lowercase text-ink ${className}`}>
      {name}
      <span className={accent ? 'ml-0.5' : 'ml-0.5 text-coral'} style={accentStyle} aria-hidden>.</span>
    </span>
  );
}