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
79
80
|
import React from 'react'
import {type TextStyle, View, type ViewStyle} from 'react-native'
import {capitalize} from '#/lib/strings/capitalize'
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
import {atoms as a, native, useTheme} from '#/alf'
import * as Toggle from '#/components/forms/Toggle'
import {Text} from '#/components/Typography'
export function InterestButton({interest}: {interest: string}) {
const t = useTheme()
const interestsDisplayNames = useInterestsDisplayNames()
const ctx = Toggle.useItemContext()
const styles = React.useMemo(() => {
const hovered: ViewStyle[] = [
{
backgroundColor:
t.name === 'light' ? t.palette.contrast_200 : t.palette.contrast_50,
},
]
const focused: ViewStyle[] = []
const pressed: ViewStyle[] = []
const selected: ViewStyle[] = [
{
backgroundColor: t.palette.contrast_900,
},
]
const selectedHover: ViewStyle[] = [
{
backgroundColor: t.palette.contrast_800,
},
]
const textSelected: TextStyle[] = [
{
color: t.palette.contrast_100,
},
]
return {
hovered,
focused,
pressed,
selected,
selectedHover,
textSelected,
}
}, [t])
return (
<View
style={[
{
backgroundColor: t.palette.contrast_100,
paddingVertical: 15,
},
a.rounded_full,
a.px_2xl,
ctx.hovered ? styles.hovered : {},
ctx.focused ? styles.hovered : {},
ctx.pressed ? styles.hovered : {},
ctx.selected ? styles.selected : {},
ctx.selected && (ctx.hovered || ctx.focused || ctx.pressed)
? styles.selectedHover
: {},
]}>
<Text
style={[
{
color: t.palette.contrast_900,
},
a.font_bold,
native({paddingTop: 2}),
ctx.selected ? styles.textSelected : {},
]}>
{interestsDisplayNames[interest] || capitalize(interest)}
</Text>
</View>
)
}
|
