asd

src/app/page.js

@@ -1,6 +1,5 @@
 import * as React from "react"
 
-import { Card, CardContent } from "@/components/ui/card"
 import {
   Carousel,
   CarouselContent,
@@ -9,26 +8,32 @@ import {
   CarouselPrevious,
 } from "@/components/ui/carousel"
 
-export async function CarouselDemo() {
-const res = await fetch("https://db.jacekr.tech/api/collections/klasy/records?perPage=50");
+export const instant = false
 
-if (!res.ok) {
-  throw new Error("Failed to fetch data");
-}
+export default async function CarouselDemo() {
+  const res = await fetch(
+    "https://db.jacekr.tech/api/collections/klasy/records?perPage=50"
+  )
 
-const data = await res.json();
+  if (!res.ok) {
+    throw new Error("Failed to fetch data")
+  }
+
+  const data = await res.json()
+  const classes = Array.isArray(data.items) ? data.items : []
 
   return (
     <Carousel className="w-full max-w-[12rem] sm:max-w-xs">
       <CarouselContent>
-        {data.map((_, index) => (
-          <CarouselItem key={index}>
+        {classes.map((schoolClass) => (
+          <CarouselItem key={schoolClass.id}>
             <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
+              <div className="flex aspect-square flex-col items-center justify-center rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+                <span className="text-4xl font-semibold">{schoolClass.nazwa}</span>
+                <span className="mt-2 text-sm text-muted-foreground">
+                  {schoolClass.ilosc_uczniow} uczniów
+                </span>
+              </div>
             </div>
           </CarouselItem>
         ))}