Version 1.0.0

resources/js/components/home-carousel/home-carousel.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Link, Head } from '@inertiajs/react';
+import Autoplay from "embla-carousel-autoplay";
+
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+
+const SLIDES_COUNT = 13;
+const AUTOPLAY_DELAY = 4000;
+
+interface HomepageData {
+    title?: string;
+    content?: string;
+    photo?: string;
+    carouselPhotos: Array<{
+        name: string;
+        photo: string;
+        description: string;
+        url: string;
+        external: boolean;
+    }>;
+}
+
+interface CarouselProps extends React.HTMLAttributes<HTMLElement> {}
+
+export default function HomeCarousel({ className, ...props }: CarouselProps) {
+    const [homepageData, setHomepageData] = React.useState<HomepageData | null>(null);
+
+    React.useEffect(() => {
+        fetch('/api/homepage')
+            .then(response => response.json())
+            .then(data => setHomepageData(data))
+            .catch(error => console.error('Error fetching carousel photos:', error));
+    }, []);
+
+    return (
+        <div className="w-full max-w-screen-sm md:max-w-screen-lg lg:max-w-screen-xl mx-auto px-12">
+            <Carousel
+                className="mt-8 mb-8 select-none"
+        plugins={[
+          Autoplay({
+            delay: AUTOPLAY_DELAY,
+          }),
+        ]}
+      >
+        <CarouselContent className="-ml-1">
+          {homepageData?.carouselPhotos?.map((photo, index) => (
+            <CarouselItem key={index} className="pl-1 basis-3/3 md:basis-1/3 lg:basis-1/5">
+              <div className="p-1">
+                <Card className="p-0">
+                  <CardContent className="flex aspect-square items-center justify-center p-0">
+                    {photo.external ? (
+                        <a href={photo.url} target="_blank" rel="noopener noreferrer" title={photo.name} className="cursor-pointer">
+                            <img src={photo.photo} alt={photo.description} className="h-full object-cover rounded-lg" />
+                        </a>
+                    ) : (
+                        <Link href={photo.url} title={photo.name} className="cursor-pointer">
+                            <img src={photo.photo} alt={photo.description} className="h-full object-cover rounded-lg" />
+                        </Link>
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  );
+}