61 lines
1.5 KiB
JavaScript
61 lines
1.5 KiB
JavaScript
import { View, Text, Pressable } from "react-native";
|
||
import React from "react";
|
||
import BorderGradient from "./BorderGradient/BorderGradient";
|
||
import { Palette, Style } from "../styles";
|
||
import { BlurView } from "expo-blur";
|
||
import { FONT_FAMILY } from "../styles/Fonts";
|
||
|
||
const BorderGradientButton = ({ title = "J’ai déjà mes paroles", onPress }) => {
|
||
return (
|
||
<Pressable onPress={onPress}>
|
||
<BorderGradient
|
||
gradientProps={{
|
||
colors: ["#F94697", "#7023F7"],
|
||
start: { x: 0, y: 0 },
|
||
end: { x: 1, y: 0 },
|
||
locations: [0, 1],
|
||
}}
|
||
style={{
|
||
height: 50,
|
||
borderRadius: 14,
|
||
borderWidth: 1,
|
||
zIndex: 1,
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
borderRadius: 14,
|
||
overflow: "hidden",
|
||
backgroundColor: "#73737324",
|
||
width: "100%",
|
||
height: "100%",
|
||
}}
|
||
>
|
||
<BlurView
|
||
intensity={40}
|
||
tint="dark"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
...Style.containerCenter,
|
||
borderRadius: 14,
|
||
}}
|
||
>
|
||
<Text
|
||
style={{
|
||
fontSize: 15,
|
||
color: Palette.white,
|
||
fontFamily: FONT_FAMILY.InterMedium,
|
||
}}
|
||
>
|
||
{title}
|
||
</Text>
|
||
</BlurView>
|
||
</View>
|
||
</BorderGradient>
|
||
</Pressable>
|
||
);
|
||
};
|
||
|
||
export default BorderGradientButton;
|