51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
|
import { Link } from "react-router";
|
||
|
|
|
||
|
|
import { cx, FOCUS_RING } from "./styles";
|
||
|
|
import type { NavSurface } from "./types";
|
||
|
|
|
||
|
|
/* Exported from Figma logo/sharp-er (317:5571) and logo/sharp-er-dark
|
||
|
|
(317:7812). Intrinsic 334x46; the navigation draws it at 100px wide, which
|
||
|
|
is the designed size in every navigation frame (desktop and mobile). */
|
||
|
|
const LOGO_SRC: Record<NavSurface, string> = {
|
||
|
|
light: "/assets/sharp-er-logo.png",
|
||
|
|
dark: "/assets/sharp-er-logo-dark.png",
|
||
|
|
};
|
||
|
|
|
||
|
|
const LOGO_INTRINSIC_WIDTH = 334;
|
||
|
|
const LOGO_INTRINSIC_HEIGHT = 46;
|
||
|
|
|
||
|
|
export interface BrandProps {
|
||
|
|
/** Locale-prefixed home path, e.g. "/en". */
|
||
|
|
href: string;
|
||
|
|
/** Accessible name of the link; the image itself is decorative. */
|
||
|
|
label: string;
|
||
|
|
surface: NavSurface;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** The SHARP-ER wordmark, linking home. Sits at the inline start of the bar. */
|
||
|
|
export function Brand({ href, label, surface, className }: BrandProps) {
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
to={href}
|
||
|
|
aria-label={label}
|
||
|
|
className={cx(
|
||
|
|
"inline-flex shrink-0 items-center rounded-control",
|
||
|
|
FOCUS_RING,
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src={LOGO_SRC[surface]}
|
||
|
|
alt=""
|
||
|
|
width={LOGO_INTRINSIC_WIDTH}
|
||
|
|
height={LOGO_INTRINSIC_HEIGHT}
|
||
|
|
loading="eager"
|
||
|
|
decoding="async"
|
||
|
|
draggable={false}
|
||
|
|
className="block h-auto w-[100px]"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
}
|