emaui/apps/portal/src/app/components/Logo.tsx

import { Box, type BoxProps } from '@mantine/core';

/**
 * App logo variants. Each maps to a file in `public/brand/` that is served at
 * the site root by Vite. To swap the placeholder for the real artwork, just
 * replace the file (keep the name) — or, if it's a PNG/other format, update the
 * path here.
 */
const LOGO = {
  color: '/ema-logo.png',
  white: '/brand/ema-white.png',
} as const;

export type LogoVariant = keyof typeof LOGO;

interface LogoProps extends BoxProps {
  /** Which artwork to render. Defaults to the full-colour mark. */
  variant?: LogoVariant;
  /** Rendered height (and width — the mark is square) in px. */
  size?: number;
  alt?: string;
}

/**
 * The EMA app logo. A single source of truth for the brand mark so every
 * surface (auth pages, portal header, V2 layout) stays in sync.
 */
export function Logo({
  variant = 'color',
  size = 40,
  alt = 'EMA Portal',
  ...boxProps
}: LogoProps) {
  return (
    <Box
      component="img"
      src={LOGO[variant]}
      alt={alt}
      w={size}
      h={size}
      style={{ display: 'block', objectFit: 'contain', flexShrink: 0 }}
      {...boxProps}
    />
  );
}