share modal

src/components/DocumentDropZone.js

@@ -1,23 +1,17 @@
-import React, {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useGlobal,
-} from "reactn";
-import { Image, Pressable, Text, View } from "react-native";
-import * as ImagePicker from "expo-image-picker";
-import moment from "moment";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import * as DocumentPicker from "expo-document-picker";
+import * as ImagePicker from "expo-image-picker";
+import moment from "moment";
+import { Image, Pressable, Text, View } from "react-native";
 import Compressor from "react-native-compressor";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit";
+import React, { useCallback, useEffect, useRef, useState } from "reactn";
 
 import { arrayUnion } from "../config/firebase";
 
-import Style, { gutterConstant, mainBorderRadius } from "../styles/Style";
-import { Fonts, Palette } from "../styles";
 import { icons } from "../assets";
+import { Fonts, Palette } from "../styles";
+import Style, { gutterConstant, mainBorderRadius } from "../styles/Style";
 
 import { uploadFileToFirebase } from "../helpers/uploadToFirebase";
 import useLayoutType from "../hooks/useLayoutType";

src/components/modal/ShareModal.js

@@ -222,78 +222,151 @@ const ShareModal = ({ payload }) => {
     ];
   }, [encodedShareText, encodedUrl, payload?.options, shareTitle]);
 
-  return (
-    <AppActionSheet id="Share">
-      <View style={styles.container}>
-        <BlurView
-          style={[styles.card, styles.blurCard]}
-          tint="dark"
-          intensity={40}
-          {...blurProps}
-        >
-          {/* <Pressable
-            onPress={closeSheet}
-            style={styles.closeButton}
-            hitSlop={8}
-          >
-            <Feather name="x" size={18} color={Palette.white} />
-          </Pressable> */}
-          <Text style={styles.heading}>{heading}</Text>
-          <View style={styles.linkRow}>
-            <Text numberOfLines={1} style={styles.linkText}>
-              {linkLabel}
-            </Text>
-            <View style={styles.linkActions}>
-              <Pressable
-                hitSlop={8}
-                onPress={handleCopy}
-                style={styles.iconButton}
-              >
-                <Feather
-                  name={copied ? "check" : "copy"}
-                  size={16}
-                  color={Palette.white}
-                />
-              </Pressable>
-              <Pressable
-                hitSlop={8}
-                onPress={onSystemShare}
-                style={styles.iconButton}
-              >
-                <Feather name="share-2" size={16} color={Palette.white} />
-              </Pressable>
-            </View>
+  const mobileContent = (
+    <View style={styles.container}>
+      <BlurView
+        style={[styles.card, styles.blurCard]}
+        tint="dark"
+        intensity={40}
+        {...blurProps}
+      >
+        <Text style={styles.heading}>{heading}</Text>
+        <View style={styles.linkRow}>
+          <Text numberOfLines={1} style={styles.linkText}>
+            {linkLabel}
+          </Text>
+          <View style={styles.linkActions}>
+            <Pressable
+              hitSlop={8}
+              onPress={handleCopy}
+              style={styles.iconButton}
+            >
+              <Feather
+                name={copied ? "check" : "copy"}
+                size={16}
+                color={Palette.white}
+              />
+            </Pressable>
+            <Pressable
+              hitSlop={8}
+              onPress={onSystemShare}
+              style={styles.iconButton}
+            >
+              <Feather name="share-2" size={16} color={Palette.white} />
+            </Pressable>
           </View>
-          {copied ? <Text style={styles.copiedText}>Lien copié</Text> : null}
-        </BlurView>
+        </View>
+        {copied ? <Text style={styles.copiedText}>Lien copié</Text> : null}
+      </BlurView>
 
-        <BlurView intensity={40} tint="dark" style={styles.card} {...blurProps}>
-          <Text style={styles.sectionHeading}>{sectionTitle}</Text>
-          <View style={styles.optionsList}>
+      <BlurView intensity={40} tint="dark" style={styles.card} {...blurProps}>
+        <Text style={styles.sectionHeading}>{sectionTitle}</Text>
+        <View style={styles.optionsList}>
+          {shareOptions.map((option, index) => {
+            const Icon = option?.Icon ?? Feather;
+            return (
+              <BlurView
+                key={option?.key || index}
+                style={styles.optionBlur}
+                intensity={100}
+                {...blurProps}
+              >
+                <Pressable
+                  onPress={() => handleShareOption(option)}
+                  style={styles.optionRow}
+                >
+                  <View style={styles.optionIconWrapper}>
+                    <Icon size={18} color={Palette.white} />
+                  </View>
+                  <Text style={styles.optionLabel}>{option?.label}</Text>
+                </Pressable>
+              </BlurView>
+            );
+          })}
+        </View>
+      </BlurView>
+    </View>
+  );
+
+  const webContent = (
+    <View style={styles.webContainer}>
+      <View style={styles.webHeader}>
+        <Text style={styles.webHeading}>{heading}</Text>
+        <Pressable
+          onPress={closeSheet}
+          hitSlop={12}
+          style={styles.webCloseButton}
+        >
+          <Feather name="x" size={16} color={Palette.white} />
+        </Pressable>
+      </View>
+
+      <Text style={styles.webSubheading}>{shareMessage}</Text>
+
+      <View style={styles.webContent}>
+        <View style={styles.webLinkCard}>
+          <Text style={styles.webLinkLabel}>{linkLabel}</Text>
+          <View style={styles.webLinkActions}>
+            <Pressable
+              onPress={handleCopy}
+              style={[
+                styles.webActionButton,
+                styles.webPrimaryButton,
+                copied && styles.webActionButtonActive,
+              ]}
+            >
+              <Feather
+                name={copied ? "check" : "copy"}
+                size={16}
+                color={Palette.white}
+              />
+              <Text style={styles.webActionLabel}>
+                {copied ? "Lien copié" : "Copier le lien"}
+              </Text>
+            </Pressable>
+
+            <Pressable
+              onPress={onSystemShare}
+              style={[styles.webActionButton, styles.webSecondaryButton]}
+            >
+              <Feather name="share-2" size={16} color={Palette.white} />
+              <Text style={styles.webActionLabel}>Partager</Text>
+            </Pressable>
+          </View>
+        </View>
+
+        <View style={styles.webOptionsCard}>
+          <Text style={styles.webSectionHeading}>{sectionTitle}</Text>
+          <View style={styles.webOptionsGrid}>
             {shareOptions.map((option, index) => {
               const Icon = option?.Icon ?? Feather;
               return (
-                <BlurView
+                <Pressable
                   key={option?.key || index}
-                  style={styles.optionBlur}
-                  intensity={100}
-                  {...blurProps}
+                  onPress={() => handleShareOption(option)}
+                  style={styles.webOptionRow}
                 >
-                  <Pressable
-                    onPress={() => handleShareOption(option)}
-                    style={styles.optionRow}
-                  >
-                    <View style={styles.optionIconWrapper}>
-                      <Icon size={18} color={Palette.white} />
-                    </View>
-                    <Text style={styles.optionLabel}>{option?.label}</Text>
-                  </Pressable>
-                </BlurView>
+                  <View style={styles.webOptionIcon}>
+                    <Icon size={18} color={Palette.white} />
+                  </View>
+                  <Text style={styles.webOptionLabel}>{option?.label}</Text>
+                  <Feather
+                    name="chevron-right"
+                    size={16}
+                    color="rgba(255, 255, 255, 0.6)"
+                  />
+                </Pressable>
               );
             })}
           </View>
-        </BlurView>
+        </View>
       </View>
+    </View>
+  );
+
+  return (
+    <AppActionSheet id="Share" webModal={isWeb} onClose={closeSheet}>
+      {isWeb ? webContent : mobileContent}
     </AppActionSheet>
   );
 };
@@ -405,6 +478,119 @@ const styles = StyleSheet.create({
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterMedium,
   },
+  webContainer: {
+    gap: 24,
+  },
+  webHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 12,
+  },
+  webHeading: {
+    flex: 1,
+    fontSize: 24,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+  },
+  webCloseButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  webSubheading: {
+    fontSize: 14,
+    color: "rgba(255, 255, 255, 0.65)",
+    fontFamily: FONT_FAMILY.InterMedium,
+  },
+  webContent: {
+    gap: 20,
+  },
+  webLinkCard: {
+    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 18,
+    gap: 16,
+  },
+  webLinkLabel: {
+    color: Palette.white,
+    fontSize: 15,
+    fontFamily: FONT_FAMILY.InterMedium,
+    overflow: "hidden",
+  },
+  webLinkActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    flexWrap: "wrap",
+  },
+  webActionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    paddingHorizontal: 18,
+    paddingVertical: 12,
+    borderRadius: 16,
+  },
+  webPrimaryButton: {
+    backgroundColor: Palette.primary,
+  },
+  webSecondaryButton: {
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+  },
+  webActionButtonActive: {
+    backgroundColor: Palette.darkRadioactivGreen,
+  },
+  webActionLabel: {
+    fontSize: 14,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterMedium,
+  },
+  webOptionsCard: {
+    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    borderRadius: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 22,
+    gap: 16,
+  },
+  webSectionHeading: {
+    fontSize: 18,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+  },
+  webOptionsGrid: {
+    gap: 12,
+  },
+  webOptionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    backgroundColor: "rgba(255, 255, 255, 0.04)",
+    borderRadius: 16,
+    paddingHorizontal: 18,
+    paddingVertical: 14,
+  },
+  webOptionIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.08)",
+    marginRight: 4,
+  },
+  webOptionLabel: {
+    flex: 1,
+    fontSize: 15,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterMedium,
+  },
 });
 
 export default ShareModal;