import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import {useThemeConfig, useWindowSize} from '@docusaurus/theme-common';
import ThemedImage from '@theme/ThemedImage';
function LogoThemedImage({logo, alt, imageClassName}) {
const windowSize = useWindowSize();
const isMobile = windowSize === 'mobile';
const getMobileLogoPath = (path) => path?.replace('.svg', '-mobile.svg');
const sources = {
light: useBaseUrl(isMobile ? getMobileLogoPath(logo.src) : logo.src),
dark: useBaseUrl(isMobile ? getMobileLogoPath(logo.srcDark || logo.src) : (logo.srcDark || logo.src)),
};
const themedImage = (
<ThemedImage
className={logo.className}
sources={sources}
height={logo.height}
width={logo.width}
alt={alt}
style={logo.style}
/>
);
return imageClassName ? (
<div className={imageClassName}>{themedImage}</div>
) : (
themedImage
);
}
export default function Logo(props) {
const {
siteConfig: {title},
} = useDocusaurusContext();
const {
navbar: {title: navbarTitle, logo},
} = useThemeConfig();
const {imageClassName, titleClassName, ...propsRest} = props;
const logoLink = useBaseUrl(logo?.href || '/');
const fallbackAlt = navbarTitle ? '' : title;
const alt = logo?.alt ?? fallbackAlt;
return (
<Link
to={logoLink}
{...propsRest}
{...(logo?.target && {target: logo.target})}>
{logo && (
<LogoThemedImage
logo={logo}
alt={alt}
imageClassName={imageClassName}
/>
)}
{navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
</Link>
);
}