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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| 'use client'
| import type { FC } from 'react'
| import React, { useCallback } from 'react'
| import type { VariantProps } from 'class-variance-authority'
| import { cva } from 'class-variance-authority'
| import cn from '@/utils/classnames'
| import Tooltip from '@/app/components/base/tooltip'
|
| const variants = cva([], {
| variants: {
| align: {
| left: 'justify-start',
| center: 'justify-center',
| right: 'justify-end',
| },
| },
| defaultVariants: {
| align: 'center',
| },
| },
| )
|
| type Props = {
| className?: string
| title: string
| onSelect: () => void
| selected: boolean
| disabled?: boolean
| align?: 'left' | 'center' | 'right'
| tooltip?: string
| } & VariantProps<typeof variants>
|
| const OptionCard: FC<Props> = ({
| className,
| title,
| onSelect,
| selected,
| disabled,
| align = 'center',
| tooltip,
| }) => {
| const handleSelect = useCallback(() => {
| if (selected || disabled)
| return
| onSelect()
| }, [onSelect, selected, disabled])
|
| return (
| <div
| className={cn(
| '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',
| (!selected && !disabled) && 'hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs cursor-pointer',
| selected && 'bg-components-option-card-option-selected-bg border-[1.5px] border-components-option-card-option-selected-border system-sm-medium shadow-xs',
| disabled && 'text-text-disabled',
| variants({ align }),
| className,
| )}
| onClick={handleSelect}
| >
| <span>{title}</span>
| {tooltip
| && <Tooltip
| popupContent={
| <div className='w-[240px]'>
| {tooltip}
| </div>
| }
| />
| }
| </div>
| )
| }
|
| export default React.memo(OptionCard)
|
|
