Sites Display

app/dashboard/sites/SitesPage.tsx

@@ -3,6 +3,8 @@ import Sidebar from "@/components/Sidebar";
 import { Plus } from "lucide-react";
 import AddSite from "@/components/dialogues/AddSite";
 import Sites from "@/components/cards/Sites";
+import axios from "axios";
+import { useEffect, useState } from "react";
 
 interface SitesPageProps {
     username: string;
@@ -11,6 +13,13 @@ interface SitesPageProps {
 
 
 export default function SitesPage({ username, name }: SitesPageProps) {
+    const [sites, setSites] = useState([]);
+    useEffect(() => {
+        axios.get('/api/sites/get_all').then((response) => {
+            setSites(response.data.sites);
+        });
+    }, []);
+    
     return (
         <Sidebar 
             username={username} 
@@ -30,7 +39,11 @@ export default function SitesPage({ username, name }: SitesPageProps) {
                 </div>
 
                 <AddSite />
-                <Sites id="" name="test" description="test" networks={[]} />
+                <div className="flex flex-col gap-4 pt-4">
+                    {sites.map((site: any) => (
+                        <Sites key={site.id} id={site.id} name={site.name} description={site.description} networks={site.networks} />
+                    ))}
+                </div>
             </main>
         </Sidebar>
     )

components/cards/Sites.tsx

@@ -11,7 +11,12 @@ export default function Sites({ id, name, description, networks }: SitesProps) {
             <div className="card-body">
                 <h2 className="card-title">{name}</h2>
                 <p>{description}</p>
-                <p>Networks: {networks.join(', ')}</p>
+                { networks && networks.length > 0 && (
+                    <p>Networks: {networks.join(', ')}</p>
+                )}
+                <div className="card-actions justify-end">
+                    <button className="btn btn-secondary btn-sm btn-outline">View</button>
+                </div>
             </div>
         </div>
     )