robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
samuel.fm
1import React from 'react'
2import {type TextStyle, View, type ViewStyle} from 'react-native'
3
4import {type Interest, useInterestsDisplayNames} from '#/lib/interests'
5import {capitalize} from '#/lib/strings/capitalize'
6import {atoms as a, native, useTheme} from '#/alf'
7import * as Toggle from '#/components/forms/Toggle'
8import {Text} from '#/components/Typography'
9
10export function InterestButton({interest}: {interest: Interest}) {
11 const t = useTheme()
12 const interestsDisplayNames = useInterestsDisplayNames()
13 const ctx = Toggle.useItemContext()
14
15 const styles = React.useMemo(() => {
16 const hovered: ViewStyle[] = [
17 {
18 backgroundColor:
19 t.name === 'light' ? t.palette.contrast_200 : t.palette.contrast_50,
20 },
21 ]
22 const focused: ViewStyle[] = []
23 const pressed: ViewStyle[] = []
24 const selected: ViewStyle[] = [
25 {
26 backgroundColor: t.palette.contrast_900,
27 },
28 ]
29 const selectedHover: ViewStyle[] = [
30 {
31 backgroundColor: t.palette.contrast_800,
32 },
33 ]
34 const textSelected: TextStyle[] = [
35 {
36 color: t.palette.contrast_100,
37 },
38 ]
39
40 return {
41 hovered,
42 focused,
43 pressed,
44 selected,
45 selectedHover,
46 textSelected,
47 }
48 }, [t])
49
50 return (
51 <View
52 style={[
53 {
54 backgroundColor: t.palette.contrast_100,
55 paddingVertical: 15,
56 },
57 a.rounded_full,
58 a.px_2xl,
59 ctx.hovered ? styles.hovered : {},
60 ctx.focused ? styles.hovered : {},
61 ctx.pressed ? styles.hovered : {},
62 ctx.selected ? styles.selected : {},
63 ctx.selected && (ctx.hovered || ctx.focused || ctx.pressed)
64 ? styles.selectedHover
65 : {},
66 ]}>
67 <Text
68 style={[
69 {
70 color: t.palette.contrast_900,
71 },
72 a.font_semi_bold,
73 native({paddingTop: 2}),
74 ctx.selected ? styles.textSelected : {},
75 ]}>
76 {interestsDisplayNames[interest] || capitalize(interest)}
77 </Text>
78 </View>
79 )
80}