Thomas Demirdjian
106 lines
2.5 KiB
JavaScript
106 lines
2.5 KiB
JavaScript
import { BlurView } from "expo-blur";
|
||
import React from "react";
|
||
import { Image, Pressable, Text, View } from "react-native";
|
||
import { Palette, Style } from "../styles";
|
||
import { FONT_FAMILY } from "../styles/Fonts";
|
||
import { size } from "../styles/Style";
|
||
import BorderGradient from "./BorderGradient/BorderGradient";
|
||
|
||
const HEIGHT_BY_SIZE = {
|
||
small: 40,
|
||
medium: 50,
|
||
large: 58,
|
||
};
|
||
|
||
const FONT_SIZE_BY_SIZE = {
|
||
small: 13,
|
||
medium: 15,
|
||
large: 17,
|
||
};
|
||
|
||
const BorderGradientButton = ({
|
||
title = "J’ai déjà mes paroles",
|
||
onPress,
|
||
icon,
|
||
titleStyle,
|
||
containerStyle = {},
|
||
tint = "dark",
|
||
disabled = false,
|
||
maxWidth = null,
|
||
size = "medium",
|
||
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];
|
||
const iconSize = resolvedSize === "small" ? 14 : 16;
|
||
|
||
return (
|
||
<Pressable
|
||
onPress={onPress}
|
||
disabled={disabled}
|
||
style={[
|
||
{
|
||
maxWidth: maxWidth ? maxWidth : null,
|
||
height: buttonHeight,
|
||
opacity: disabled ? 0.6 : 1,
|
||
},
|
||
containerStyle,
|
||
]}
|
||
>
|
||
<BorderGradient
|
||
gradientProps={{
|
||
colors: ["#F94697", "#7023F7"],
|
||
start: { x: 0, y: 0 },
|
||
end: { x: 1, y: 0 },
|
||
locations: [0, 1],
|
||
}}
|
||
style={{
|
||
height: buttonHeight,
|
||
borderRadius: 14,
|
||
borderWidth: 1,
|
||
zIndex: 1,
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
borderRadius: 14,
|
||
overflow: "hidden",
|
||
backgroundColor: "#73737324",
|
||
width: "100%",
|
||
height: "100%",
|
||
}}
|
||
>
|
||
<BlurView
|
||
intensity={40}
|
||
tint={tint}
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
...Style.containerCenter,
|
||
...Style.containerRow,
|
||
borderRadius: 14,
|
||
gap: 11,
|
||
}}
|
||
>
|
||
{icon && <Image source={icon} style={size({ size: iconSize })} />}
|
||
<Text
|
||
style={{
|
||
fontSize,
|
||
color: Palette.white,
|
||
fontFamily: FONT_FAMILY.InterMedium,
|
||
...titleStyle,
|
||
}}
|
||
>
|
||
{title}
|
||
</Text>
|
||
</BlurView>
|
||
</View>
|
||
</BorderGradient>
|
||
</Pressable>
|
||
);
|
||
};
|
||
|
||
export default BorderGradientButton;
|