62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
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>
|
|
);
|
|
}
|
|
|