import { useId } from 'react';
type Props = Readonly<{
size?: number;
className?: string;
}>;
/**
* The RD monogram, as an inline SVG rather than an ``.
*
* Two reasons it has to be inline. The tile is drawn in `currentColor`, so it
* follows the antd text token and inverts with the app's own theme switch — the
* favicon file inverts on `prefers-color-scheme`, which tracks the operating
* system and would disagree with the app whenever someone toggles the theme
* themselves. And the letters are knocked out with a mask rather than painted in
* the background colour, so the mark sits correctly on any surface instead of
* carrying a hardcoded backdrop that only matches the header.
*
* Decorative: the header already says "Redefined Designs" beside it, so it is
* hidden from assistive technology rather than read out twice.
*/
export default function BrandMark({ size = 28, className }: Props) {
// Unique per instance — two marks on one page would otherwise share a mask id
// and the second would reference the first. The id is stripped to alphanumerics
// because React's generated ids contain colons.
const maskId = `rd-knockout-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
return (
);
}
`.
*
* Two reasons it has to be inline. The tile is drawn in `currentColor`, so it
* follows the antd text token and inverts with the app's own theme switch — the
* favicon file inverts on `prefers-color-scheme`, which tracks the operating
* system and would disagree with the app whenever someone toggles the theme
* themselves. And the letters are knocked out with a mask rather than painted in
* the background colour, so the mark sits correctly on any surface instead of
* carrying a hardcoded backdrop that only matches the header.
*
* Decorative: the header already says "Redefined Designs" beside it, so it is
* hidden from assistive technology rather than read out twice.
*/
export default function BrandMark({ size = 28, className }: Props) {
// Unique per instance — two marks on one page would otherwise share a mask id
// and the second would reference the first. The id is stripped to alphanumerics
// because React's generated ids contain colons.
const maskId = `rd-knockout-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
return (
);
}