Made CadPackage component support button or div

This commit is contained in:
Frank Johnson
2021-09-19 17:02:21 -04:00
parent 65fc526220
commit 348d2e0a01

View File

@@ -46,19 +46,27 @@ const CadPackage = ({
const cadPackageConfig = cadPackageConfigs[cadPackage] const cadPackageConfig = cadPackageConfigs[cadPackage]
return ( return (
<button <ButtonOrDiv
onClick={onClick} onClick={onClick}
className={ className={
`grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 ${ `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30
onClick && ' hover:bg-opacity-80 ' ${cadPackageConfig?.buttonClasses} ` + className
} ${cadPackageConfig?.buttonClasses} ` + className
} }
> >
<div <div
className={`${cadPackageConfig?.dotClasses} ${dotClass} rounded-full`} className={`${cadPackageConfig?.dotClasses} ${dotClass} rounded-full`}
/> />
{cadPackageConfig?.label} {cadPackageConfig?.label}
</button> </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>
) )
} }