85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import { Image, Pressable, Text } from 'react-native'
|
|
import { Palette, Style } from '../styles'
|
|
import { FONT_FAMILY } from '../styles/Fonts'
|
|
import { size } from '../styles/Style'
|
|
import { LinearGradient } from './LinearGradient/LinearGradient'
|
|
|
|
const HEIGHT_BY_SIZE = {
|
|
small: 44,
|
|
medium: 50,
|
|
large: 58,
|
|
}
|
|
|
|
const FONT_SIZE_BY_SIZE = {
|
|
small: 14,
|
|
medium: 15,
|
|
large: 17,
|
|
}
|
|
|
|
const GradientButton = ({
|
|
title = '',
|
|
colors = ['#F94697', '#7023F7'],
|
|
onPress,
|
|
props,
|
|
containerStyle = {},
|
|
icon,
|
|
disabled = false,
|
|
maxWidth = null,
|
|
size = 'medium',
|
|
textStyle = {},
|
|
gradientStyle = {},
|
|
height = null,
|
|
}) => {
|
|
const resolvedSize = HEIGHT_BY_SIZE[size] ? size : 'medium'
|
|
const buttonHeight = typeof height === 'number' ? height : HEIGHT_BY_SIZE[resolvedSize]
|
|
const fontSize = FONT_SIZE_BY_SIZE[resolvedSize]
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onPress}
|
|
disabled={disabled}
|
|
style={[
|
|
{
|
|
opacity: disabled ? 0.6 : 1,
|
|
maxWidth: maxWidth ? maxWidth : null,
|
|
height: buttonHeight,
|
|
},
|
|
containerStyle,
|
|
]}
|
|
>
|
|
<LinearGradient
|
|
colors={colors}
|
|
style={[
|
|
{
|
|
...Style.containerCenter,
|
|
...Style.containerRow,
|
|
height: buttonHeight,
|
|
borderRadius: 14,
|
|
gap: 10,
|
|
},
|
|
gradientStyle,
|
|
]}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
{...props}
|
|
>
|
|
{icon && <Image source={icon} style={size({ size: 16 })} />}
|
|
<Text
|
|
style={{
|
|
fontSize,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
paddingHorizontal: 10,
|
|
...textStyle,
|
|
}}
|
|
>
|
|
{title}
|
|
</Text>
|
|
</LinearGradient>
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
export default GradientButton
|