77 lines
1.9 KiB
JavaScript
77 lines
1.9 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 RotationBorder from "./RotationBorder/RotationBorder";
|
||
|
||
const BorderGradientButton = ({
|
||
title = "J’ai déjà mes paroles",
|
||
onPress,
|
||
icon,
|
||
titleStyle,
|
||
containerStyle = {},
|
||
tint = "dark",
|
||
disabled = false,
|
||
maxWidth = null,
|
||
}) => {
|
||
const pressableStyle = {
|
||
...(maxWidth ? { maxWidth } : {}),
|
||
...containerStyle,
|
||
opacity: disabled ? 0.6 : 1,
|
||
};
|
||
|
||
return (
|
||
<Pressable onPress={onPress} disabled={disabled} style={pressableStyle}>
|
||
<RotationBorder
|
||
borderWidth={2}
|
||
borderRadius={14}
|
||
colors={["#F94697", "#7023F7"]}
|
||
style={{
|
||
height: 50,
|
||
width: "100%",
|
||
zIndex: 1,
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
borderRadius: 14,
|
||
overflow: "hidden",
|
||
backgroundColor: "#000000b8",
|
||
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: 16 })} />}
|
||
<Text
|
||
style={{
|
||
fontSize: 15,
|
||
color: Palette.white,
|
||
fontFamily: FONT_FAMILY.InterMedium,
|
||
...titleStyle,
|
||
}}
|
||
>
|
||
{title}
|
||
</Text>
|
||
</BlurView>
|
||
</View>
|
||
</RotationBorder>
|
||
</Pressable>
|
||
);
|
||
};
|
||
|
||
export default BorderGradientButton;
|