46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
|
|
import { usePlFeConfig, useSettings, useTheme } from 'pl-fe/hooks';
|
|
|
|
interface ISiteLogo extends React.ComponentProps<'img'> {
|
|
/** Extra class names for the <img> element. */
|
|
className?: string;
|
|
/** Override theme setting for <SitePreview /> */
|
|
theme?: 'dark' | 'light';
|
|
}
|
|
|
|
/** Display the most appropriate site logo based on the theme and configuration. */
|
|
const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
|
|
const { logo, logoDarkMode } = usePlFeConfig();
|
|
const { demo } = useSettings();
|
|
|
|
let darkMode = ['dark', 'black'].includes(useTheme());
|
|
if (theme === 'dark') darkMode = true;
|
|
|
|
/** pl-fe logo. */
|
|
const plFeLogo = darkMode
|
|
? require('pl-fe/assets/images/soapbox-logo-white.svg')
|
|
: require('pl-fe/assets/images/soapbox-logo.svg');
|
|
|
|
// Use the right logo if provided, then use fallbacks.
|
|
const getSrc = () => {
|
|
// In demo mode, use the pl-fe logo.
|
|
if (demo) return plFeLogo;
|
|
|
|
return (darkMode && logoDarkMode)
|
|
? logoDarkMode
|
|
: logo || logoDarkMode || plFeLogo;
|
|
};
|
|
|
|
return (
|
|
// eslint-disable-next-line jsx-a11y/alt-text
|
|
<img
|
|
className={clsx('object-contain', className)}
|
|
src={getSrc()}
|
|
{...rest}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export { SiteLogo as default };
|