// Realistic t-shirt mockup SVGs for 4 zones (front, back, leftSleeve, rightSleeve).
// Each renders a t-shirt with shadows/folds and overlays a print zone where
// designs (logos) get rendered with drag/resize/rotate support handled by the editor.
// Color palettes for shirts
const SHIRT_FILLS = {
white: { body: '#f3f3f1', shade: '#d8d8d4', deep: '#b8b8b3', neck: '#cfcfc9', stitch: '#a0a09a', fold: '#c8c8c2' },
black: { body: '#1a1a1c', shade: '#0a0a0c', deep: '#000', neck: '#0c0c0e', stitch: '#3a3a3d', fold: '#2a2a2d' },
};
// The PrintZone is a positioned rect on the shirt where the design canvas lives.
// Coordinates are in the SVG viewBox space. Editor will use these to convert to mm.
// Zone print rectangles in the SVG (x,y,width,height) for each view
const ZONE_RECTS = {
front: { x: 130, y: 130, w: 240, h: 280 },
back: { x: 110, y: 100, w: 280, h: 340 },
sleeve: { x: 60, y: 60, w: 180, h: 220 },
};
function useSvgId(prefix) {
const ref = React.useRef(null);
if (!ref.current) ref.current = `${prefix}-${Math.random().toString(36).slice(2, 10)}`;
return ref.current;
}
function ShirtFront({ shirtColor = 'white', children, showZoneOutline = true }) {
const c = SHIRT_FILLS[shirtColor];
const shadeId = useSvgId('frontShade');
const centerId = useSvgId('frontCenter');
return (
);
}
function ShirtBack({ shirtColor = 'white', children, showZoneOutline = true }) {
const c = SHIRT_FILLS[shirtColor];
const shadeId = useSvgId('backShade');
const centerId = useSvgId('backCenter');
return (
);
}
function ShirtSleeve({ shirtColor = 'white', children, showZoneOutline = true }) {
const c = SHIRT_FILLS[shirtColor];
const shadeId = useSvgId('slvShade');
return (
);
}
Object.assign(window, { ShirtFront, ShirtBack, ShirtSleeve, ZONE_RECTS, SHIRT_FILLS });