File size: 1,587 Bytes
4304c6d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import s from './style.module.css'
type Props = {
className?: string
icon: React.ReactNode
iconBgClassName?: string
title: React.ReactNode
description: string
noRadio?: boolean
isChosen?: boolean
onChosen?: () => void
chosenConfig?: React.ReactNode
chosenConfigWrapClassName?: string
}
const RadioCard: FC<Props> = ({
icon,
iconBgClassName = 'bg-[#F5F3FF]',
title,
description,
noRadio,
isChosen,
onChosen = () => {},
chosenConfig,
chosenConfigWrapClassName,
}) => {
return (
<div className={cn(s.item, isChosen && s.active)}>
<div className='flex py-3 pl-3 pr-4' onClick={onChosen}>
<div className={cn(iconBgClassName, 'mr-3 shrink-0 flex w-8 justify-center h-8 items-center rounded-lg')}>
{icon}
</div>
<div className='grow'>
<div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
<div className='leading-[18px] text-xs font-normal text-[#667085]'>{description}</div>
</div>
{!noRadio && (
<div className='shrink-0 flex items-center h-8'>
<div className={s.radio}></div>
</div>
)}
</div>
{((isChosen && chosenConfig) || noRadio) && (
<div className={cn(chosenConfigWrapClassName, 'pt-2 px-14 pb-6 border-t border-gray-200')}>
{chosenConfig}
</div>
)}
</div>
)
}
export default React.memo(RadioCard)
|