add les 12

Les12-Tool-Calling/polderfest-demo/app/supabase/page.tsx

@@ -0,0 +1,61 @@
+import { supabaseAdmin } from "@/lib/supabase-admin";
+
+type Band = {
+  id: number;
+  name: string;
+  genre: string;
+  stage: string;
+  day: string;
+  start_time: string;
+};
+
+export default async function SupabasePage() {
+  const { data, error } = await supabaseAdmin
+    .from("bands")
+    .select("id,name,genre,stage,day,start_time")
+    .order("popularity", { ascending: false })
+    .limit(10);
+
+  return (
+    <main className="max-w-3xl mx-auto p-6 space-y-6">
+      <header className="space-y-1">
+        <h1 className="text-2xl font-bold">Supabase verbinding</h1>
+        <p className="text-sm text-gray-600">
+          Dit is een Server Component die met de service role key de top 10 bands
+          uit de <code className="px-1 py-0.5 bg-gray-100 rounded">bands</code>{" "}
+          tabel ophaalt.
+        </p>
+      </header>
+
+      {error ? (
+        <div className="p-4 border border-red-200 bg-red-50 rounded-lg">
+          <div className="font-medium text-red-800">
+            Query faalde: {error.message}
+          </div>
+          <div className="text-sm text-red-700 mt-2">
+            Check of de <code className="px-1 py-0.5 bg-white/70 rounded">bands</code>{" "}
+            tabel bestaat en of je <code className="px-1 py-0.5 bg-white/70 rounded">SUPABASE_SERVICE_ROLE_KEY</code>{" "}
+            klopt.
+          </div>
+        </div>
+      ) : (
+        <ul className="divide-y border rounded-lg overflow-hidden">
+          {(data as Band[] | null)?.map((b) => (
+            <li key={b.id} className="p-4 flex items-start justify-between gap-4">
+              <div className="min-w-0">
+                <div className="font-semibold truncate">{b.name}</div>
+                <div className="text-sm text-gray-600">
+                  {b.genre} • {b.stage}
+                </div>
+              </div>
+              <div className="shrink-0 text-sm text-gray-700">
+                {b.day} {b.start_time}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}
+