rotation border

2025-10-06 16:08:19 +02:00
parent 042b3d9019
commit bf0184d16c
4 changed files with 151 additions and 29 deletions
@@ -0,0 +1,76 @@
+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;