navigate to home instead of floàw

src/components/AppActionSheet.js

@@ -1,13 +1,37 @@
+import { Portal } from "@gorhom/portal";
 import { BlurView } from "expo-blur";
 import React from "react";
-import { Platform } from "react-native";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isWeb } from "../hooks/useLayoutType";
 import { gutters, Palette } from "../styles";
 
-const AppActionSheet = ({ children, ...props }) => {
+const AppActionSheet = ({
+  children,
+  webModal = false,
+  onClose = () => {},
+  ...sheetProps
+}) => {
   const insets = useSafeAreaInsets();
+
+  if (isWeb && webModal) {
+    return (
+      <Portal>
+        <View style={styles.webOverlay} pointerEvents="box-none">
+          <Pressable
+            onPress={onClose}
+            style={StyleSheet.absoluteFill}
+            pointerEvents="auto"
+          />
+          <BlurView intensity={40} tint="dark" style={styles.webModalCard}>
+            {children}
+          </BlurView>
+        </View>
+      </Portal>
+    );
+  }
+
   return (
     <ActionSheet
       containerStyle={{ backgroundColor: Palette.tran }}
@@ -17,7 +41,8 @@ const AppActionSheet = ({ children, ...props }) => {
         width: 50,
         zIndex: 2,
       }}
-      {...props}
+      onClose={onClose}
+      {...sheetProps}
     >
       <BlurView
         intensity={Platform.OS === "ios" || isWeb ? 20 : 10}
@@ -41,3 +66,21 @@ const AppActionSheet = ({ children, ...props }) => {
 };
 
 export default AppActionSheet;
+
+const styles = StyleSheet.create({
+  webOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+  },
+  webModalCard: {
+    width: 480,
+    maxWidth: "90%",
+    borderRadius: 28,
+    overflow: "hidden",
+    backgroundColor: Palette.glass,
+    padding: 32,
+  },
+});

src/components/ItemContainer/ItemContainer.js

@@ -1,9 +1,9 @@
-import { View, StyleSheet, Platform } from "react-native";
-import React from "react";
-import BorderGradient from "../BorderGradient/BorderGradient";
-import { BlurView } from "expo-blur";
-import { responsiveHeight } from "react-native-responsive-dimensions";
 import { useKeyboard } from "@react-native-community/hooks";
+import { BlurView } from "expo-blur";
+import React from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import BorderGradient from "../BorderGradient/BorderGradient";
 
 const ItemContainer = ({
   height = responsiveHeight(40),
@@ -36,9 +36,9 @@ const ItemContainer = ({
       <View style={styles.blurContainer}>
         <BlurView
           intensity={Platform.select({
-            ios: 40,
-            android: 60,
-            web: 30,
+            ios: 80,
+            android: 100,
+            web: 100,
           })}
           tint={"dark"}
           style={{ flex: 1, padding: 6 }}