44 lines
913 B
TypeScript
44 lines
913 B
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useTheme } from "next-themes";
|
|
import { useSyncExternalStore } from "react";
|
|
|
|
const emptySubscribe = () => () => {};
|
|
|
|
function useMounted() {
|
|
return useSyncExternalStore(
|
|
emptySubscribe,
|
|
() => true,
|
|
() => false,
|
|
);
|
|
}
|
|
|
|
export function Logo({
|
|
className,
|
|
height = 48,
|
|
}: {
|
|
className?: string;
|
|
height?: number;
|
|
}) {
|
|
const { resolvedTheme } = useTheme();
|
|
const mounted = useMounted();
|
|
|
|
// Aspect ratio from the original images: 480x200 = 2.4:1
|
|
const width = Math.round(height * 2.4);
|
|
|
|
// Before mount, show the dark logo (works on both themes as a fallback)
|
|
const isDark = mounted ? resolvedTheme === "dark" : false;
|
|
|
|
return (
|
|
<Image
|
|
src={isDark ? "/logo_light.png" : "/logo_dark.png"}
|
|
alt="Prabhupāda Says"
|
|
width={width}
|
|
height={height}
|
|
className={className}
|
|
priority
|
|
/>
|
|
);
|
|
}
|