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
75
76
77
78
| 'use client'
| import type { FC } from 'react'
| import React from 'react'
| import cn from '@/utils/classnames'
|
| type Option = {
| value: string
| text: string | React.JSX.Element
| }
|
| type ItemProps = {
| className?: string
| isActive: boolean
| onClick: (v: string) => void
| option: Option
| smallItem?: boolean
| }
| const Item: FC<ItemProps> = ({
| className,
| isActive,
| onClick,
| option,
| smallItem,
| }) => {
| return (
| <div
| key={option.value}
| className={cn(
| 'relative pb-2.5 ',
| !isActive && 'cursor-pointer',
| smallItem ? 'system-sm-semibold-uppercase' : 'system-xl-semibold',
| className,
| )}
| onClick={() => !isActive && onClick(option.value)}
| >
| <div className={cn(isActive ? 'text-text-primary' : 'text-text-tertiary')}>{option.text}</div>
| {isActive && (
| <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-util-colors-blue-brand-blue-brand-600'></div>
| )}
| </div>
| )
| }
|
| type Props = {
| className?: string
| value: string
| onChange: (v: string) => void
| options: Option[]
| noBorderBottom?: boolean
| smallItem?: boolean
| itemClassName?: string
| }
|
| const TabSlider: FC<Props> = ({
| className,
| value,
| onChange,
| options,
| noBorderBottom,
| itemClassName,
| smallItem,
| }) => {
| return (
| <div className={cn(className, !noBorderBottom && 'border-b border-divider-subtle', 'flex space-x-6')}>
| {options.map(option => (
| <Item
| isActive={option.value === value}
| option={option}
| onClick={onChange}
| key={option.value}
| className={itemClassName}
| smallItem={smallItem}
| />
| ))}
| </div>
| )
| }
| export default React.memo(TabSlider)
|
|
