77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
export type CadPackageType = 'openscad' | 'cadquery' | 'jscad' | 'INIT'
|
|
|
|
interface CadPackageConfig {
|
|
label: string
|
|
buttonClasses: string
|
|
dotClasses: string
|
|
}
|
|
|
|
export const cadPackageConfigs: { [key in CadPackageType]: CadPackageConfig } =
|
|
{
|
|
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',
|
|
},
|
|
INIT: {
|
|
label: '',
|
|
buttonClasses: '',
|
|
dotClasses: '',
|
|
},
|
|
}
|
|
|
|
interface CadPackageProps {
|
|
cadPackage: CadPackageType
|
|
className?: string
|
|
dotClass?: string
|
|
onClick?: any
|
|
}
|
|
|
|
const CadPackage = ({
|
|
cadPackage,
|
|
className = '',
|
|
dotClass = 'w-5 h-5',
|
|
onClick,
|
|
}: CadPackageProps) => {
|
|
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>
|
|
)
|
|
}
|
|
|
|
// Returns a proper button if an onClick handler is passed in, or a div
|
|
// if the element is meant to be a simple badge
|
|
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
|