Site card renamed to sitepage

components/cards/Site.tsx

@@ -0,0 +1,47 @@
+"use client"
+import { useRouter } from "next/navigation";
+import { Site as SiteType } from "@/app/types";
+import { ChevronRight } from "lucide-react";
+
+export default function Site({ id, name, description, networks }: SiteType) {
+    const router = useRouter();
+    return (
+        <div className="relative group bg-base-100 border border-base-200 rounded-xl shadow-xl overflow-hidden h-48" style={{ display: 'block' }}>
+            <div className="p-6 pr-20 h-full flex flex-col">
+                <h2 className="text-xl font-bold">{name}</h2>
+                
+                {description ? (
+                    <p className="text-sm opacity-70 mt-2 line-clamp-2">{description}</p>
+                ) : (
+                    <p className="text-sm opacity-50 italic mt-2">No description provided</p>
+                )}
+                
+                <div className="mt-auto">
+                    {networks && networks.length > 0 ? (
+                        <div className="mt-3">
+                            <p className="text-sm font-medium mb-1">Networks:</p>
+                            <div className="bg-base-200 p-2 rounded-lg overflow-y-auto max-h-16">
+                                {networks.map((network, index) => (
+                                    <span key={network.id || index} className="inline-block bg-base-300 rounded px-2 py-1 text-xs mr-2 mb-1">
+                                        {network.name}
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="mt-3">
+                            <p className="text-sm opacity-60">No networks configured</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+            
+            <div 
+                onClick={() => router.push(`/dashboard/sites/${id}`)}
+                className="absolute top-0 right-0 bottom-0 h-full w-12 bg-primary hover:bg-primary-focus text-primary-content flex items-center justify-center cursor-pointer transition-colors"
+            >
+                <ChevronRight className="h-8 w-8" />
+            </div>
+        </div>
+    );
+}