Servers Page & updates useSerevrs hook

app/dashboard/servers/ServersPage.tsx

@@ -0,0 +1,45 @@
+"use client";
+import Sidebar from "@/components/Sidebar";
+import { Plus } from "lucide-react";
+import AddSite from "@/components/dialogues/AddSite";
+import Sites from "@/components/cards/Site";
+import Pagination from "@/components/Pagination";
+import SearchAndLayout from "@/components/SearchAndLayout";
+import Loading from "@/components/Loading";
+import useServers from "@/hooks/useServers";
+
+interface ServersPageProps {
+    username: string;
+    name: string;
+}
+
+export default function ServersPage({ username, name }: ServersPageProps) {
+    const {
+        servers,
+        loading,
+        currentPage,
+        itemPerPage,
+        total,
+        search,
+        setSearch,
+        handlePageChange,
+        setItemPerPage,
+        loadServers,
+        addServer
+    } = useServers();
+    return (
+        <Sidebar
+            username={username}
+            fullName={name}
+            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Servers']}
+        >
+            <main>
+                <div className="flex gap-4 items-center">
+                    <div className="flex-1">
+                        
+                    </div>
+                </div>
+            </main>
+        </Sidebar>
+    )
+}

app/dashboard/servers/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import ServersPage from "./ServersPage";
+import Loading from "@/components/Loading";
+
+import { useEffect } from "react";
+import useAuth from "@/hooks/useAuth";
+
+export default function Dashboard() {
+  const { loading, username, name, validate } = useAuth();
+
+  useEffect(() => {
+    const runValidation = async () => {
+    await validate();
+  };
+    
+    runValidation();
+  }, [validate]);
+
+  if (loading) {
+    return <Loading />;
+  } else {
+    return <ServersPage username={username} name={name} />;
+  }
+}