49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
// * Packages
|
|
import { Link } from "@inertiajs/react";
|
|
import { route } from "ziggy-js";
|
|
// * Other
|
|
import { useTheme } from "@/back/providers/ThemeProvider";
|
|
import logoUwilCMSLight from "&/images/logos/uwil-cms.svg";
|
|
import logoUwilCMSDark from "&/images/logos/uwil-cms-dark.svg";
|
|
import logoTinyUwilCMS from "&/images/logos/uwil-cms-icon.svg";
|
|
|
|
type ApplicationLogoProps = {
|
|
forceLight?: boolean;
|
|
isCollapsed?: boolean;
|
|
};
|
|
|
|
/**
|
|
* Get the logo.
|
|
*
|
|
* @param isCollapsed boolean
|
|
* @param forceLight boolean
|
|
* @param theme string
|
|
* @return string
|
|
*/
|
|
function getLogo(isCollapsed: boolean, forceLight: boolean, theme: string) {
|
|
if (isCollapsed) return logoTinyUwilCMS;
|
|
if (forceLight || theme === "dark") return logoUwilCMSLight;
|
|
return logoUwilCMSDark;
|
|
}
|
|
|
|
export default function ApplicationLogo({
|
|
forceLight = false,
|
|
isCollapsed = false,
|
|
}: ApplicationLogoProps) {
|
|
const { theme } = useTheme();
|
|
const wrapperClasses = isCollapsed ? "h-8" : "w-full max-w-[10rem] mx-auto";
|
|
const logo = getLogo(isCollapsed, forceLight, theme);
|
|
|
|
return (
|
|
<Link
|
|
href={route("back.dashboard.index")}
|
|
className={`${wrapperClasses} rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`}
|
|
>
|
|
<img
|
|
src={logo}
|
|
alt="UWIL CMS logo"
|
|
className={`rounded-md w-auto mx-auto ${isCollapsed ? "h-full" : "max-h-full"}`}
|
|
/>
|
|
</Link>
|
|
);
|
|
}
|