Files
podcastdistributiona/components/ui/logo.tsx
T
Leon Serfaty cd1d6a1a28 Add brand logo + favicon across app surfaces
Ship the Podcast Distribution AI wordmark as real assets and replace the
Mic-tile + text placeholder everywhere it appeared.

- public/logo-dark.png (dark wordmark, for light backgrounds) and
  public/logo-light.png (light wordmark, for dark backgrounds)
- New <Logo> component swaps the two via Tailwind dark: variants, so the
  dark logo shows on all non-themed surfaces (marketing, auth, admin,
  public share) and the light logo only in dark-mode app surfaces
- Wire <Logo> into the marketing header/footer, auth layout, app header
  (default branch only - white-label org logos untouched), admin header
  (+ Admin badge), and the public share page
- Favicon via App Router file convention: app/icon.png + app/apple-icon.png

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-20 20:58:37 -04:00

34 lines
1.1 KiB
TypeScript

import Image from "next/image";
import logoDark from "@/public/logo-dark.png";
import logoLight from "@/public/logo-light.png";
import { cn } from "@/lib/utils";
/**
* The Podcast Distribution AI wordmark. Two assets ship: a dark logo for light
* backgrounds and a light logo for dark backgrounds. They are swapped purely
* with Tailwind `dark:` variants, so on surfaces without a `.dark` ancestor
* (marketing, auth, admin, public share) the dark logo is always shown — which
* is exactly where a dark logo is required.
*
* `className` controls the height (default `h-7`); width follows automatically.
* Set `priority` for above-the-fold placements (e.g. site/app headers).
*/
export function Logo({ className, priority = false }: { className?: string; priority?: boolean }) {
return (
<>
<Image
src={logoDark}
alt="Podcast Distribution AI"
priority={priority}
className={cn("h-7 w-auto dark:hidden", className)}
/>
<Image
src={logoLight}
alt="Podcast Distribution AI"
priority={priority}
className={cn("hidden h-7 w-auto dark:block", className)}
/>
</>
);
}