Moves slides to array in props of carousel

Author: MostlyTurquoise

src/components/HomepageCarousel.svelte

@@ -1,13 +1,30 @@
 <script lang="ts">
     import * as Carousel from "@/components/ui/carousel/index.ts";
+    import { type CarouselAPI } from "@/components/ui/carousel/context.js";
+    import { Button } from "@/components/ui/button";
     import HomepageCarouselItem from "@/components/HomepageCarouselItem.svelte";
+    interface Props {
+        slides: {
+            title: string;
+            image: {
+                path:string;
+                alt?:string;
+            };
+            text: string;
+            actionLabel: string;
+            actionTo: string;
+        }[];
+    }
+    let {slides}: Props = $props();
 </script>
 
-<Carousel.Root class="w-full h-fit">
+<Carousel.Root opts={{
+    loop: true,
+  }} class="w-full h-fit">
     <Carousel.Content class="bg-red-400">
-        <HomepageCarouselItem src="/images/IMG_7311.JPG" />
-        <Carousel.Item>B</Carousel.Item>
-        <Carousel.Item>C</Carousel.Item>
+        {#each slides as slide}
+            <HomepageCarouselItem src={slide.image.path} alt={slide.image.alt} />
+        {/each}
     </Carousel.Content>
     <div
         class="w-4/5 sm:w-72 bg-background absolute bottom-12 left-8 px-4 py-2"

src/globals.css

@@ -43,8 +43,8 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 4 100% 57%; /* #FF3123 robocon red */
+    --primary-foreground: 210 40% 98%; /* idk, to change */
 
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
@@ -57,7 +57,7 @@
 
     --ring: 222.2 84% 4.9%;
 
-    --radius: 0.5rem;
+    --radius: 0.4rem;
   }
 
   .dark {
@@ -99,4 +99,4 @@
   body {
     @apply bg-background text-foreground;
   }
-}
+}

src/pages/index.astro

@@ -10,6 +10,16 @@ import HomepageCarousel from '@/components/HomepageCarousel.svelte';
 		<Navbar/>
 	</header>
 	<main class="h-screen">
-		<HomepageCarousel client:load/>
+		<HomepageCarousel client:load slides={[
+			{
+				title:"Lorem Ipsum",
+				image:{
+					path:"/images/IMG_7815.JPG",
+				},
+				text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.",
+				actionLabel:"Click",
+				actionTo:"/"
+			}
+		]}/>
 	</main>
 </Layout>