quilling.dev
+1
.eslintrc.js
+1
.eslintrc.js
+44
src/components/Button.tsx
+44
src/components/Button.tsx
···
837
837
</View>
838
838
)
839
839
}
840
+
841
+
export type StackedButtonProps = Omit<
842
+
ButtonProps,
843
+
keyof VariantProps | 'children'
844
+
> &
845
+
Pick<VariantProps, 'color'> & {
846
+
children: React.ReactNode
847
+
icon: React.ComponentType<SVGIconProps>
848
+
}
849
+
850
+
export function StackedButton({children, ...props}: StackedButtonProps) {
851
+
return (
852
+
<Button
853
+
{...props}
854
+
size="tiny"
855
+
style={[
856
+
a.flex_col,
857
+
{
858
+
height: 72,
859
+
paddingHorizontal: 16,
860
+
borderRadius: 20,
861
+
gap: 4,
862
+
},
863
+
props.style,
864
+
]}>
865
+
<StackedButtonInnerText icon={props.icon}>
866
+
{children}
867
+
</StackedButtonInnerText>
868
+
</Button>
869
+
)
870
+
}
871
+
872
+
function StackedButtonInnerText({
873
+
children,
874
+
icon: Icon,
875
+
}: Pick<StackedButtonProps, 'icon' | 'children'>) {
876
+
const textStyles = useSharedButtonTextStyles()
877
+
return (
878
+
<>
879
+
<Icon width={24} fill={textStyles.color} />
880
+
<ButtonText>{children}</ButtonText>
881
+
</>
882
+
)
883
+
}
+25
src/view/screens/Storybook/Buttons.tsx
+25
src/view/screens/Storybook/Buttons.tsx
···
8
8
ButtonIcon,
9
9
type ButtonSize,
10
10
ButtonText,
11
+
StackedButton,
11
12
} from '#/components/Button'
12
13
import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
13
14
import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
···
17
18
return (
18
19
<View style={[a.gap_md]}>
19
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>
20
45
21
46
{[
22
47
'primary',