Better error handling

app/layout.tsx

@@ -28,7 +28,7 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
-            <Navbar />
+            
             {children}
             <Toaster />
           </ThemeProvider>

app/page.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { useRoutes } from '@/lib/clientActions';
 import Image from 'next/image';
 import Loading from '@/components/Loading';
+import Error from '@/components/Error';
 
 
 export default function Home() {
@@ -13,32 +14,30 @@ export default function Home() {
   const { data: routes, error, isLoading } = useRoutes();
   let routesMap: Route[] = routes as Route[];
 
-  if (error) return <div>Error loading routes</div>
-  if(isLoading) return (
-    <Loading />
-  )
+  if(error) return <Error />
+  if(isLoading) return <Loading />
 
-   return (
-     <main>
-       <div className='flex items-center justify-center p-6'>
-         <Card className='flex'>
-           <CardHeader>
-             <CardTitle>Active Routes</CardTitle>
-             <CardDescription>Amount of configured routes</CardDescription>
-           </CardHeader>
-           <CardContent className='flex items-center'>
-             <div>
-               <p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
-             </div>
-           </CardContent>
-           <CardFooter>
-             <Button className='translate-y-2.5'>Create</Button>
-           </CardFooter>
-         </Card>
-       </div>
-       <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
-         <RouteCards routes={routes as Route[]} />
-       </div>
-     </main>
-   )
+    return (
+      <main>
+        <div className='flex items-center justify-center p-6'>
+          <Card className='flex'>
+            <CardHeader>
+              <CardTitle>Active Routes</CardTitle>
+              <CardDescription>Amount of configured routes</CardDescription>
+            </CardHeader>
+            <CardContent className='flex items-center'>
+              <div>
+                <p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
+              </div>
+            </CardContent>
+            <CardFooter>
+              <Button className='translate-y-2.5'>Create</Button>
+            </CardFooter>
+          </Card>
+        </div>
+        <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
+          <RouteCards routes={routes as Route[]} />
+        </div>
+      </main>
+    )
 }

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",