45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import type { CSSProperties } from 'react';
|
||
|
|
|
||
|
|
export const BRAND_NAME = 'Nudentic';
|
||
|
|
|
||
|
|
/** Light-theme primary — use in print/PDF where theme tokens are unsafe. */
|
||
|
|
export const BRAND_PRIMARY_HEX = '#009cae';
|
||
|
|
|
||
|
|
type BrandWordmarkProps = {
|
||
|
|
className?: string;
|
||
|
|
style?: CSSProperties;
|
||
|
|
/**
|
||
|
|
* i-dot color. Omit to use the theme primary token.
|
||
|
|
* Pass a hex (e.g. `BRAND_PRIMARY_HEX`) for print/PDF capture.
|
||
|
|
*/
|
||
|
|
dotColor?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
function BrandI({ fill }: { fill: string }) {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
aria-hidden
|
||
|
|
viewBox="0 0 24 80"
|
||
|
|
className="inline-block h-[0.78em] w-[0.26em] overflow-visible align-baseline ms-[0.05em] me-[0.04em]"
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="10" r="8" fill={fill} />
|
||
|
|
<rect x="6" y="28" width="12" height="52" rx="1.2" fill="currentColor" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function BrandWordmark({ className, style, dotColor }: BrandWordmarkProps) {
|
||
|
|
const tittleFill = dotColor ?? 'var(--color-primary)';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span dir="ltr" className={className} style={style}>
|
||
|
|
<span className="sr-only">{BRAND_NAME}</span>
|
||
|
|
<span aria-hidden>
|
||
|
|
Nudent
|
||
|
|
<BrandI fill={tittleFill} />
|
||
|
|
c
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|