From e21167e09b56bbde572707cf590bf0cec24764f4 Mon Sep 17 00:00:00 2001
From: headlesdev <damian.bergemann@outlook.com>
Date: Sun, 18 May 2025 12:17:18 +0200
Subject: [PATCH] Sites Display

---
 app/dashboard/sites/SitesPage.tsx | 15 ++++++++++++++-
 components/cards/Sites.tsx        |  7 ++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/dashboard/sites/SitesPage.tsx b/app/dashboard/sites/SitesPage.tsx
index 02a0696..7bee931 100644
--- a/app/dashboard/sites/SitesPage.tsx
+++ b/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>
     )
diff --git a/components/cards/Sites.tsx b/components/cards/Sites.tsx
index 142c93d..2bce871 100644
--- a/components/cards/Sites.tsx
+++ b/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>
     )