chore: add cursor pointer for option card (#12119)
This commit is contained in:
parent
309fd76ddf
commit
9d86056f1c
@ -15,13 +15,15 @@ type OptionCardHeaderProps = {
|
|||||||
isActive?: boolean
|
isActive?: boolean
|
||||||
activeClassName?: string
|
activeClassName?: string
|
||||||
effectImg?: string
|
effectImg?: string
|
||||||
|
disabled?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
|
export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
|
||||||
const { icon, title, description, isActive, activeClassName, effectImg } = props
|
const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
|
||||||
return <div className={classNames(
|
return <div className={classNames(
|
||||||
'flex h-full overflow-hidden rounded-t-xl relative',
|
'flex h-full overflow-hidden rounded-t-xl relative',
|
||||||
isActive && activeClassName,
|
isActive && activeClassName,
|
||||||
|
!disabled && 'cursor-pointer',
|
||||||
)}>
|
)}>
|
||||||
<div className='size-14 flex items-center justify-center relative overflow-hidden'>
|
<div className='size-14 flex items-center justify-center relative overflow-hidden'>
|
||||||
{isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
|
{isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
|
||||||
@ -63,7 +65,7 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
|
|||||||
(isActive && !noHighlight)
|
(isActive && !noHighlight)
|
||||||
? 'border-[1.5px] border-components-option-card-option-selected-border'
|
? 'border-[1.5px] border-components-option-card-option-selected-border'
|
||||||
: 'border border-components-option-card-option-border',
|
: 'border border-components-option-card-option-border',
|
||||||
disabled && 'opacity-50',
|
disabled && 'opacity-50 cursor-not-allowed',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
@ -83,6 +85,7 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
|
|||||||
isActive={isActive && !noHighlight}
|
isActive={isActive && !noHighlight}
|
||||||
activeClassName={activeHeaderClassName}
|
activeClassName={activeHeaderClassName}
|
||||||
effectImg={effectImg}
|
effectImg={effectImg}
|
||||||
|
disabled={disabled}
|
||||||
/>
|
/>
|
||||||
{/** Body */}
|
{/** Body */}
|
||||||
{isActive && (children || actions) && <div className='py-3 px-4 bg-components-panel-bg rounded-b-xl'>
|
{isActive && (children || actions) && <div className='py-3 px-4 bg-components-panel-bg rounded-b-xl'>
|
||||||
|
Loading…
Reference in New Issue
Block a user