import type { PesPatternData } from '../formats/import/pesImporter'; interface PatternInfoProps { pesData: PesPatternData; showThreadBlocks?: boolean; } export function PatternInfo({ pesData, showThreadBlocks = false }: PatternInfoProps) { return ( <>
Size {((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed(1)} x{' '} {((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed(1)} mm
Stitches {pesData.penStitches?.stitches.length.toLocaleString() || pesData.stitchCount.toLocaleString()} {pesData.penStitches && pesData.penStitches.stitches.length !== pesData.stitchCount && ( ({pesData.stitchCount.toLocaleString()}) )}
{showThreadBlocks ? 'Colors / Blocks' : 'Colors'} {showThreadBlocks ? `${pesData.uniqueColors.length} / ${pesData.threads.length}` : pesData.uniqueColors.length }
Colors:
{pesData.uniqueColors.slice(0, 8).map((color, idx) => { // Primary metadata: brand and catalog number const primaryMetadata = [ color.brand, color.catalogNumber ? `#${color.catalogNumber}` : null ].filter(Boolean).join(" "); // Secondary metadata: chart and description const secondaryMetadata = [ color.chart, color.description ].filter(Boolean).join(" "); const metadata = [primaryMetadata, secondaryMetadata].filter(Boolean).join(" • "); // Show which thread blocks use this color in PatternSummaryCard const threadNumbers = color.threadIndices.map(i => i + 1).join(", "); const tooltipText = showThreadBlocks ? (metadata ? `Color ${idx + 1}: ${color.hex} - ${metadata}` : `Color ${idx + 1}: ${color.hex}`) : (metadata ? `Color ${idx + 1}: ${color.hex}\n${metadata}\nUsed in thread blocks: ${threadNumbers}` : `Color ${idx + 1}: ${color.hex}\nUsed in thread blocks: ${threadNumbers}`); return (
); })} {pesData.uniqueColors.length > 8 && (
+{pesData.uniqueColors.length - 8}
)}
); }