Merge pull request #15542 from ethereum/roadmap-rtl-patch

fix(temp): roadmap release carousel on RTL pages

Author: corwintines

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

@@ -1,5 +1,7 @@
 "use client"
 
+// TODO: Extract intl strings
+// TODO: Fix RTL compatibility; currenly forced to LTR flow
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useLocale } from "next-intl"
 
@@ -89,7 +91,7 @@ const ReleaseCarousel = () => {
   }
 
   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">
@@ -100,6 +102,7 @@ const ReleaseCarousel = () => {
               opts={{
                 align: "center",
                 containScroll: false,
+                direction: "ltr",
                 loop: false,
                 startIndex,
               }}
@@ -211,6 +214,7 @@ const ReleaseCarousel = () => {
               opts={{
                 align: "center",
                 containScroll: false,
+                direction: "ltr",
                 loop: false,
                 startIndex,
               }}

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"
@@ -207,15 +209,15 @@ const CarouselPrevious = React.forwardRef<
       className={cn(
         "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "left-5 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "start-5 top-1/2 -translate-y-1/2"
+          : "-top-12 start-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
       {...props}
     >
-      <ChevronPrev className="h-8 w-8" />
+      <MdChevronLeft className="h-8 w-8" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
@@ -236,15 +238,15 @@ const CarouselNext = React.forwardRef<
       className={cn(
         "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "right-5 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          ? "end-5 top-1/2 -translate-y-1/2"
+          : "-bottom-12 start-1/2 -translate-x-1/2 rotate-90",
         className
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
       {...props}
     >
-      <ChevronNext className="h-8 w-8" />
+      <MdChevronRight className="h-8 w-8" />
       <span className="sr-only">Next slide</span>
     </Button>
   )