mirror of
https://github.com/langgenius/dify.git
synced 2025-07-18 14:52:32 +00:00
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import cn from '@/utils/classnames'
|
|
|
|
type OptionCardProps = {
|
|
label: string
|
|
Icon: React.FC<React.SVGProps<SVGSVGElement>> | string
|
|
selected: boolean
|
|
onClick?: () => void
|
|
}
|
|
|
|
const OptionCard = ({
|
|
label,
|
|
Icon,
|
|
selected,
|
|
onClick,
|
|
}: OptionCardProps) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center gap-2 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-3 shadow-shadow-shadow-3',
|
|
selected
|
|
? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-inset ring-components-option-card-option-selected-border'
|
|
: 'hover:bg-components-option-card-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs',
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border bg-background-default-dodge p-1.5'>
|
|
{
|
|
typeof Icon === 'string'
|
|
? <div className='text-[18px] leading-[18px]'>{Icon}</div>
|
|
: <Icon className='size-5' />
|
|
}
|
|
</div>
|
|
<div className={cn('system-sm-medium text-text-secondary', selected && 'text-primary')}>
|
|
{label}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(OptionCard)
|