Made CadPackage component support button or div
This commit is contained in:
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user