share modal

2025-10-03 13:36:18 +02:00
parent 8ea7f89c7b
commit dcc50506de
13 changed files with 377 additions and 54 deletions
@@ -0,0 +1,116 @@
+import React, { useMemo } from "react";
+import { BlurView } from "expo-blur";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Feather } from "@expo/vector-icons";
+import { Portal } from "@gorhom/portal";
+
+import QrCode from "../QrCode";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const ShareQrModal = ({ visible, onClose, url, title = "Scannez le QR-code" }) => {
+  const shareUrl = useMemo(() => url, [url]);
+
+  if (!visible) {
+    return null;
+  }
+
+  const blurIntensity = Platform.select({ ios: 40, default: 20 });
+
+  return (
+    <Portal>
+      <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+        <Pressable
+          onPress={onClose}
+          style={[StyleSheet.absoluteFill, styles.backdrop]}
+        />
+
+        <View style={styles.centerWrapper} pointerEvents="box-none">
+          <BlurView intensity={blurIntensity} tint="dark" style={styles.modalCard}>
+            <Pressable onPress={onClose} style={styles.closeButton} hitSlop={10}>
+              <Feather name="x" size={20} color={Palette.white} />
+            </Pressable>
+
+            <View style={styles.content}>
+              <Text style={styles.title}>{title}</Text>
+              <Text style={styles.subtitle}>
+                Partage ce code pour guider tes contacts directement vers MusicLand.
+              </Text>
+
+              <View style={styles.qrWrapper}>
+                <QrCode value={shareUrl} size={220} backgroundColor="transparent" />
+              </View>
+
+              <Text numberOfLines={1} ellipsizeMode="middle" style={styles.linkText}>
+                {shareUrl}
+              </Text>
+            </View>
+          </BlurView>
+        </View>
+      </View>
+    </Portal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    backgroundColor: "rgba(0, 0, 0, 0.65)",
+  },
+  centerWrapper: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+  },
+  modalCard: {
+    width: 360,
+    maxWidth: "90%",
+    borderRadius: 28,
+    overflow: "hidden",
+    paddingHorizontal: 24,
+    paddingVertical: 32,
+    backgroundColor: Palette.glass,
+  },
+  closeButton: {
+    position: "absolute",
+    top: 18,
+    right: 18,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.12)",
+  },
+  content: {
+    alignItems: "center",
+    gap: 18,
+  },
+  title: {
+    fontSize: 20,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: Palette.white,
+    opacity: 0.8,
+    textAlign: "center",
+    fontFamily: FONT_FAMILY.InterRegular,
+    paddingHorizontal: 8,
+  },
+  qrWrapper: {
+    padding: 16,
+    borderRadius: 24,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+  },
+  linkText: {
+    fontSize: 13,
+    color: Palette.white,
+    opacity: 0.9,
+    textAlign: "center",
+    fontFamily: FONT_FAMILY.InterMedium,
+  },
+});
+
+export default ShareQrModal;