34 lines
1.1 KiB
TypeScript
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)}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|