import type { CSSProperties, ReactElement } from 'react';
export type FreightVisualVariant =
| 'train'
| 'warehouse'
| 'container'
| 'wagon'
| 'cargo'
| 'route'
| 'empty';
interface FreightVisualProps {
variant: FreightVisualVariant;
/** Pixel size of the (square) artwork. Defaults to 64. */
size?: number;
style?: CSSProperties;
className?: string;
title?: string;
}
/**
* Lightweight railway/freight illustrations — minimal, enterprise-logistics style.
* Inline SVG (no network cost) using EDR brand colors: green, yellow, dark text,
* light gray. Purposely low-contrast so it never overpowers tables/forms.
*
* Use only in page headers, empty states, and KPI cards.
*/
const EDR = {
green: '#2F9E44',
greenSoft: '#D3F9D8',
yellow: '#F59F00',
yellowSoft: '#FFF3BF',
dark: '#343A40',
gray: '#ADB5BD',
graySoft: '#E9ECEF',
};
function Train() {
return (
<>
{/* track */}
{/* locomotive body */}
{/* cab roof */}
{/* wagon */}
{/* wheels */}
{[12, 24, 42, 52].map((cx) => (
))}
);
}
function Warehouse() {
return (
<>
{/* ground */}
{/* roof */}
{/* body */}
{/* shutter door */}
);
}
function Container() {
return (
<>
{/* stacked containers */}
{/* corrugation lines */}
{[12, 16, 20, 24].map((x) => (
))}
{[38, 42, 46, 50].map((x) => (
))}
{[25, 29, 33, 37].map((x) => (
))}
);
}
function Wagon() {
return (
<>
{/* flatbed wagon */}
{/* cargo on wagon */}
{/* wheels */}
{[16, 26, 40, 50].map((cx) => (
))}
);
}
function Cargo() {
return (
<>
{/* cargo boxes */}
{/* tape */}
);
}
function Route() {
return (
<>
{/* track line with stations */}
{[10, 22, 34, 46, 58].map((x) => (
))}
);
}
function Empty() {
return (
<>
{/* empty open box */}
);
}
const VARIANTS: Record ReactElement> = {
train: Train,
warehouse: Warehouse,
container: Container,
wagon: Wagon,
cargo: Cargo,
route: Route,
empty: Empty,
};
export function FreightVisual({ variant, size = 64, style, className, title }: FreightVisualProps) {
const Art = VARIANTS[variant];
return (
);
}