feat: updated missing page

datsmysong · May 20, 2024 · e509236 · e509236
1 parent 51f5bd3
commit e509236
Show file tree

Hide file tree

Showing 2 changed files with 384 additions and 8 deletions.
diff --git a/expo/app/[...missing].tsx b/expo/app/[...missing].tsx
@@ -1,15 +1,44 @@
-import { Link, Stack } from "expo-router";
-import { Text, View } from "react-native";
+import { Stack, useRouter } from "expo-router";
+import ArrowSquareOut from "phosphor-react-native/src/icons/ArrowSquareOut";
+import LinkBreak from "phosphor-react-native/src/icons/LinkBreak";
+import { View } from "react-native";
+
+import Button from "../components/ui/Button";
+import { H1 } from "../components/ui/typography/Titles";
 
 export default function NotFoundScreen() {
+  const expoRouter = useRouter();
+
+  const goBack = () => {
+    if (expoRouter.canGoBack()) {
+      expoRouter.back();
+    } else {
+      expoRouter.replace("/");
+    }
+  };
+
   return (
     <>
       <Stack.Screen options={{ title: "Oops!" }} />
-      <View>
-        <Text>This screen doesn't exist.</Text>
-        <Link href="/">
-          <Text>Go to home screen!</Text>
-        </Link>
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          padding: 16,
+          gap: 64,
+        }}
+      >
+        <View
+          style={{ alignItems: "center", gap: 16, justifyContent: "center" }}
+        >
+          <LinkBreak size={64} />
+          <H1>Cette page n'existe pas</H1>
+        </View>
+        <Button onPress={goBack} block appendIcon={<ArrowSquareOut />}>
+          {expoRouter.canGoBack() && "Retourner à la page précédente"}
+          {!expoRouter.canGoBack() && "Retourner à la page d'accueil"}
+        </Button>
       </View>
     </>
   );