forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {Fragment} from 'react'
2import {View} from 'react-native'
3
4import {atoms as a} from '#/alf'
5import {
6 Button,
7 type ButtonColor,
8 ButtonIcon,
9 type ButtonSize,
10 ButtonText,
11 StackedButton,
12} from '#/components/Button'
13import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
14import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
15import {Text} from '#/components/Typography'
16
17export function Buttons() {
18 return (
19 <View style={[a.gap_md]}>
20 <Text style={[a.font_bold, a.text_5xl]}>Buttons</Text>
21
22 <View style={[a.flex_row, a.gap_md, a.align_start, {maxWidth: 350}]}>
23 <StackedButton
24 label="stacked"
25 icon={Globe}
26 color="secondary"
27 style={[a.flex_1]}>
28 Bop it
29 </StackedButton>
30 <StackedButton
31 label="stacked"
32 icon={Globe}
33 color="negative_subtle"
34 style={[a.flex_1]}>
35 Twist it
36 </StackedButton>
37 <StackedButton
38 label="stacked"
39 icon={Globe}
40 color="primary"
41 style={[a.flex_1]}>
42 Pull it
43 </StackedButton>
44 </View>
45
46 {[
47 'primary',
48 'secondary',
49 'secondary_inverted',
50 'negative',
51 'primary_subtle',
52 'negative_subtle',
53 ].map(color => (
54 <Fragment key={color}>
55 {['tiny', 'small', 'large'].map(size => (
56 <Fragment key={size}>
57 <Text style={[a.font_bold, a.text_2xl]}>
58 color={color} size={size}
59 </Text>
60 <View style={[a.flex_row, a.align_start, a.gap_md]}>
61 <Button
62 color={color as ButtonColor}
63 size={size as ButtonSize}
64 label="Click here">
65 <ButtonText>Button</ButtonText>
66 </Button>
67 <Button
68 disabled
69 color={color as ButtonColor}
70 size={size as ButtonSize}
71 label="Click here">
72 <ButtonText>Button</ButtonText>
73 </Button>
74 <Button
75 color={color as ButtonColor}
76 size={size as ButtonSize}
77 shape="round"
78 label="Click here">
79 <ButtonIcon icon={ChevronLeft} />
80 </Button>
81 <Button
82 color={color as ButtonColor}
83 size={size as ButtonSize}
84 shape="square"
85 label="Click here">
86 <ButtonIcon icon={ChevronLeft} />
87 </Button>
88 </View>
89 <View style={[a.flex_row, a.gap_md]}>
90 <Button
91 color={color as ButtonColor}
92 size={size as ButtonSize}
93 label="Click here">
94 <ButtonIcon icon={Globe} position="left" />
95 <ButtonText>Button</ButtonText>
96 </Button>
97 <Button
98 disabled
99 color={color as ButtonColor}
100 size={size as ButtonSize}
101 label="Click here">
102 <ButtonText>Button</ButtonText>
103 <ButtonIcon icon={Globe} position="right" />
104 </Button>
105 </View>
106 </Fragment>
107 ))}
108 </Fragment>
109 ))}
110 </View>
111 )
112}