Carousel content auto-updates + realised I was zoomed in in my browser for literally 5 hours or smth so all my css was off but i fixed it ;-;

Author: MostlyTurquoise

src/components/HomepageCarousel.svelte

@@ -5,36 +5,58 @@
     import HomepageCarouselItem from "@/components/HomepageCarouselItem.svelte";
     interface Props {
         slides: {
-            title: string;
             image: {
-                path:string;
-                alt?:string;
+                path: string;
+                alt?: string;
             };
+            title: string;
             text: string;
             actionLabel: string;
             actionTo: string;
         }[];
     }
-    let {slides}: Props = $props();
-</script>
+    let { slides }: Props = $props();
 
-<Carousel.Root opts={{
-    loop: true,
-  }} class="w-full h-fit">
+    let currentSlide: number = $state(0); // TODO: make check for actual value here. Could break if not starting at 0
+
+    // Theres probably a less hacky way but my ts only started working after I had written all this so hey.
+    // Type safety by "Trust me bro"
+    //@ts-ignore
+    let api: CarouselAPI = $state();
+
+    $effect(() => {
+        if (api) {
+            api.on("scroll", (el) => { // Yes this gets spammed as the slide slides, but `settle` from the embla docs doesnt seem to be working.
+                currentSlide = el.slidesInView()[0] ?? 0 // default to 0 if no slides in view (something has gone horrible wrong)
+                // console.log(currentSlide)
+            });
+        }
+    });
+</script>
+<Carousel.Root
+    opts={{
+        loop: true,
+    }}
+    class="w-full h-fit"
+    bind:api
+>
     <Carousel.Content class="bg-red-400">
         {#each slides as slide}
-            <HomepageCarouselItem src={slide.image.path} alt={slide.image.alt} />
+            <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"
+        class="m-12 w-auto sm:w-72 bg-background absolute bottom-0 sm:bottom-4 px-8 py-6"
     >
-        <h1 class="font-display text-lg">Title</h1>
-        <div class="text-xs">body text</div>
-        <Button class="h-6">Action</Button>
+        <h1 class="font-display text-xl">{slides[currentSlide]?.title ?? "Error"}</h1>
+        <div class="text-base font-sans">{slides[currentSlide]?.text ?? "It looks like something went wrong. Try refreshing"}</div>
+        <Button class="h-8 mt-2 text-lg p-5 font-mono font-semibold" href={slides[currentSlide]?.actionTo ?? "/"}>{slides[currentSlide]?.actionLabel ?? ":("}</Button>
     </div>
-    <Carousel.Previous class="top-auto -bottom-2 scale-75 left-10" />
+    <Carousel.Previous class="top-auto -bottom-0 left-14 hidden sm:flex" />
     <Carousel.Next
-        class="top-auto -bottom-2 scale-75 right-auto left-[4.5rem]"
+        class="top-auto -bottom-0 right-auto left-[6.6rem] hidden sm:flex"
     />
 </Carousel.Root>

src/pages/index.astro

@@ -19,6 +19,24 @@ import HomepageCarousel from '@/components/HomepageCarousel.svelte';
 				text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.",
 				actionLabel:"Click",
 				actionTo:"/"
+			},
+			{
+				title:"2 Lorem Ipsum",
+				image:{
+					path:"/images/IMG_7294.JPG",
+				},
+				text:"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.",
+				actionLabel:"Click 2",
+				actionTo:"/"
+			},
+			{
+				title:"3 Lorem Ipsum",
+				image:{
+					path:"/images/IMG_7311.JPG",
+				},
+				text:"3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.",
+				actionLabel:"Click 3",
+				actionTo:"/"
 			}
 		]}/>
 	</main>

tailwind.config.mjs

@@ -57,7 +57,7 @@ const config = {
 			fontFamily: {
 				sans: [...fontFamily.sans],
 				display:["Rubik Mono One", ...fontFamily.sans],
-
+				mono:["Overpass Mono","mono"]
 			}
 		}
 	},