Cleanup and fixed data leak

app/page.tsx

@@ -1,20 +1,18 @@
 "use client"
 
-import { CardTitle, Card, CardDescription, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
-import RouteCards from '@/components/RouteCards';
-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';
 import { useState } from 'react';
 import { RouteDialog } from '@/components/RouteDialog';
+import Header from '@/components/Header';
+import RouteCards from '@/components/RouteCards';
 
 
 export default function Home() {
 
-  const [route, setRoute] = useState<Route>();
-  const [open, setOpen] = useState(false);
   const { data: routes, error, isLoading } = useRoutes();
   let routesMap: Route[] = routes as Route[];
 
@@ -23,48 +21,11 @@ export default function Home() {
 
   return (
     <main>
-      {route && <RouteDialog onOpenChange={setOpen} open={open} route={route} routesMap={routesMap} />}
-      <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 onClick={() => {
-              setRoute({
-                "handle": [
-                  {
-                    "handler": "subroute",
-                    "routes": [
-                      {
-                        "handle": [
-                          {
-                            "handler": "reverse_proxy",
-                            "upstreams": []
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ],
-                "match": [
-                  {
-                    "host": []
-                  }
-                ],
-                "terminal": true
-              })
-              setOpen(true);
-            }} className='translate-y-2.5'>Create</Button>
-          </CardFooter>
-        </Card>
+      
+      <div>
+        <Header routes={routesMap} />
       </div>
+
       <div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
         <RouteCards routes={routesMap} />
       </div>

components/RouteCards.tsx

@@ -42,7 +42,7 @@ export default function RouteCards({ routes }: { routes: Route[] }) {
             {
                 routes.map((route, index) => (
                     <div key={index} className='p-2'>
-                        <Card key={index} className='w-[300px]'>
+                        <Card key={index} className='w-[15vw]'>
                             <CardHeader>
                                 <CardTitle>{getHosts(route)!.values().next().value}</CardTitle>
                                 {getHosts(route)!.map((route => <CardDescription key={route}>{route}</ CardDescription>))}