option-card.tsx 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  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. const variants = cva([], {
  8. variants: {
  9. align: {
  10. left: 'justify-start',
  11. center: 'justify-center',
  12. right: 'justify-end',
  13. },
  14. },
  15. defaultVariants: {
  16. align: 'center',
  17. },
  18. },
  19. )
  20. type Props = {
  21. className?: string
  22. title: string
  23. onSelect: () => void
  24. selected: boolean
  25. disabled?: boolean
  26. align?: 'left' | 'center' | 'right'
  27. } & VariantProps<typeof variants>
  28. const OptionCard: FC<Props> = ({
  29. className,
  30. title,
  31. onSelect,
  32. selected,
  33. disabled,
  34. align = 'center',
  35. }) => {
  36. const handleSelect = useCallback(() => {
  37. if (selected || disabled)
  38. return
  39. onSelect()
  40. }, [onSelect, selected, disabled])
  41. return (
  42. <div
  43. className={cn(
  44. 'flex items-center px-2 h-8 rounded-md system-sm-regular bg-components-option-card-option-bg border border-components-option-card-option-bg text-text-secondary cursor-default',
  45. (!selected && !disabled) && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs cursor-pointer',
  46. selected && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border system-sm-medium shadow-xs',
  47. disabled && 'text-text-disabled',
  48. variants({ align }),
  49. className,
  50. )}
  51. onClick={handleSelect}
  52. >
  53. {title}
  54. </div>
  55. )
  56. }
  57. export default React.memo(OptionCard)