fix(temp): force roadmap release carousel to LTR

Author: wackerow

app/[locale]/roadmap/_components/ReleaseCarousel.tsx

@@ -1,5 +1,8 @@
 "use client"
 
+// TODO: Extract intl strings
+// TODO: Fix RTL compatibility; currenly forced to LTR flow
+
 import { useEffect, useState } from "react"
 
 import { Image } from "@/components/Image"
@@ -73,7 +76,7 @@ const ReleaseCarousel = () => {
   }, [api1, api2])
 
   return (
-    <div className="w-full max-w-[100vw] overflow-hidden">
+    <div className="w-full max-w-[100vw] overflow-hidden" dir="ltr">
       <div className="mx-auto w-full max-w-screen-2xl px-4 sm:px-6">
         <div className="w-full rounded-2xl bg-background-highlight py-6">
           <div className="flex flex-col gap-6">
@@ -84,6 +87,7 @@ const ReleaseCarousel = () => {
               opts={{
                 align: "center",
                 containScroll: false,
+                direction: "ltr",
                 loop: false,
                 startIndex: findLatestReleaseIndex(),
               }}
@@ -202,6 +206,7 @@ const ReleaseCarousel = () => {
               opts={{
                 align: "center",
                 containScroll: false,
+                direction: "ltr",
                 loop: false,
                 startIndex: findLatestReleaseIndex(),
               }}

src/components/ui/carousel.tsx

@@ -1,9 +1,11 @@
+// TODO: Fix RTL compatibility
+
 import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from "embla-carousel-react"
+import { MdChevronLeft, MdChevronRight } from "react-icons/md"
 
-import { ChevronNext, ChevronPrev } from "@/components/Chevron"
 import { Button } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
@@ -215,7 +217,7 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ChevronPrev className="h-8 w-8" />
+      <MdChevronLeft className="h-8 w-8" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -244,7 +246,7 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ChevronNext className="h-8 w-8" />
+      <MdChevronRight className="h-8 w-8" />
       <span className="sr-only">Next slide</span>
     </Button>
   )