| 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} />} | ||||
| (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={{ | ||||
| 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'> |