export type CadPackageType = 'openscad' | 'cadquery' | 'jscad' | 'curv' | 'INIT' ; interface CadPackageConfig { label : string ; buttonClasses : string ; dotClasses : string ; } export const cadPackageConfigs = { openscad : { label : 'OpenSCAD' , buttonClasses : 'bg-yellow-800' , dotClasses : 'bg-yellow-200' , } , cadquery : { label : 'CadQuery' , buttonClasses : 'bg-ch-blue-700' , dotClasses : 'bg-blue-800' , } , jscad : { label : 'JSCAD' , buttonClasses : 'bg-ch-purple-500' , dotClasses : 'bg-yellow-300' , } , curv : { label : 'Curv' , buttonClasses : 'bg-blue-600' , dotClasses : 'bg-green-500' , } , INIT : { label : '' , buttonClasses : '' , dotClasses : '' , } , } ; interface CadPackageProps { cadPackage : CadPackageType ; className ? : string ; dotClass ? : string ; onClick ? : any ; } const CadPackage = ( { cadPackage , className = '' , dotClass = 'w-5 h-5' , onClick , } ) => { const cadPackageConfig = cadPackageConfigs [ cadPackage ] ; return ( < ButtonOrDiv onClick = { onClick } className = { `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30
         ${ cadPackageConfig ?. buttonClasses } ` + className } > < div className = { `${ cadPackageConfig ?. dotClasses } ${ dotClass } rounded-full` } /> { cadPackageConfig ?. label } < /ButtonOrDiv>); } ; function ButtonOrDiv ( { onClick , className , children } ) { return onClick ? ( < button className = { className + ' hover:bg-opacity-80' } onClick = { onClick } > { children } < /button>) : (<div className={className}>{children}</div > ) ; } export default CadPackage ;