index.tsx 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. 'use client'
  2. import type { FC } from 'react'
  3. import React from 'react'
  4. import s from './style.module.css'
  5. import cn from '@/utils/classnames'
  6. type Props = {
  7. className?: string
  8. title: string | JSX.Element | null
  9. description: string
  10. isChosen: boolean
  11. onChosen: () => void
  12. chosenConfig?: React.ReactNode
  13. icon?: JSX.Element
  14. extra?: React.ReactNode
  15. }
  16. const RadioCard: FC<Props> = ({
  17. title,
  18. description,
  19. isChosen,
  20. onChosen,
  21. icon,
  22. extra,
  23. }) => {
  24. return (
  25. <div
  26. className={cn(s.item, isChosen && s.active)}
  27. onClick={onChosen}
  28. >
  29. <div className='flex px-3 py-2'>
  30. {icon}
  31. <div>
  32. <div className='flex justify-between items-center'>
  33. <div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
  34. <div className={s.radio}></div>
  35. </div>
  36. <div className='leading-[18px] text-xs font-normal text-gray-500'>{description}</div>
  37. </div>
  38. </div>
  39. {extra}
  40. </div>
  41. )
  42. }
  43. export default React.memo(RadioCard)