46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useTheme } from "next-themes";
|
|
import { useEffect, useState } from "react";
|
|
|
|
type SiteLogoProps = {
|
|
lightLogoUrl?: string | null;
|
|
darkLogoUrl?: string | null;
|
|
alt: string;
|
|
priority?: boolean;
|
|
};
|
|
|
|
export function SiteLogo({
|
|
lightLogoUrl,
|
|
darkLogoUrl,
|
|
alt,
|
|
priority = false,
|
|
}: SiteLogoProps) {
|
|
const { theme, resolvedTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const activeTheme = theme === "system" ? resolvedTheme : theme;
|
|
const isDark = mounted && activeTheme === "dark";
|
|
const fallbackSrc = isDark ? "/logos/dark-primary.svg" : "/logos/light-primary.svg";
|
|
const src = isDark ? darkLogoUrl || lightLogoUrl || fallbackSrc : lightLogoUrl || darkLogoUrl || fallbackSrc;
|
|
|
|
return (
|
|
<span className="block">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={360}
|
|
height={92}
|
|
sizes="(min-width: 1280px) 360px, (min-width: 1024px) 320px, (min-width: 640px) 280px, 240px"
|
|
className="h-9 w-auto object-contain object-left sm:h-10 lg:h-11 xl:h-12"
|
|
priority={priority}
|
|
/>
|
|
</span>
|
|
);
|
|
}
|