option-card.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. 'use client'
  2. import type { FC } from 'react'
  3. import React, { useCallback } from 'react'
  4. import type { VariantProps } from 'class-variance-authority'
  5. import { cva } from 'class-variance-authority'
  6. import cn from '@/utils/classnames'
  7. import Tooltip from '@/app/components/base/tooltip'
  8. const variants = cva([], {
  9. variants: {
  10. align: {
  11. left: 'justify-start',
  12. center: 'justify-center',
  13. right: 'justify-end',
  14. },
  15. },
  16. defaultVariants: {
  17. align: 'center',
  18. },
  19. },
  20. )
  21. type Props = {
  22. className?: string
  23. title: string
  24. onSelect: () => void
  25. selected: boolean
  26. disabled?: boolean
  27. align?: 'left' | 'center' | 'right'
  28. tooltip?: string
  29. } & VariantProps<typeof variants>
  30. const OptionCard: FC<Props> = ({
  31. className,
  32. title,
  33. onSelect,
  34. selected,
  35. disabled,
  36. align = 'center',
  37. tooltip,
  38. }) => {
  39. const handleSelect = useCallback(() => {
  40. if (selected || disabled)
  41. return
  42. onSelect()
  43. }, [onSelect, selected, disabled])
  44. return (
  45. <div
  46. className={cn(
  47. 'flex items-center px-2 h-8 rounded-md system-sm-regular bg-components-option-card-option-bg border border-components-option-card-option-border text-text-secondary cursor-default',
  48. (!selected && !disabled) && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs cursor-pointer',
  49. selected && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border system-sm-medium shadow-xs',
  50. disabled && 'text-text-disabled',
  51. variants({ align }),
  52. className,
  53. )}
  54. onClick={handleSelect}
  55. >
  56. <span>{title}</span>
  57. {tooltip
  58. && <Tooltip
  59. popupContent={
  60. <div className='w-[240px]'>
  61. {tooltip}
  62. </div>
  63. }
  64. />
  65. }
  66. </div>
  67. )
  68. }
  69. export default React.memo(OptionCard)