refactor: create tw rtl-reponsive next/prev icons

as "Chevron" file with `ChevronNext` and `ChevronPrev` exports, deprecating non-tailwind "NextChevron" from nav component structure; updated references

Author: wackerow

src/components/Chevron/index.tsx

@@ -0,0 +1,21 @@
+import { MdChevronLeft, MdChevronRight } from "react-icons/md"
+
+import { cn } from "@/lib/utils/cn"
+
+import { useRtlFlip } from "@/hooks/useRtlFlip"
+
+export const ChevronNext = ({
+  className,
+  ...props
+}: React.HTMLAttributes<SVGElement>) => {
+  const { twFlipForRtl } = useRtlFlip()
+  return <MdChevronRight className={cn(className, twFlipForRtl)} {...props} />
+}
+
+export const ChevronPrev = ({
+  className,
+  ...props
+}: React.HTMLAttributes<SVGElement>) => {
+  const { twFlipForRtl } = useRtlFlip()
+  return <MdChevronLeft className={cn(className, twFlipForRtl)} {...props} />
+}

src/components/Nav/Menu/NextChevron.tsx

@@ -19,6 +19,7 @@ import {
 } from "@radix-ui/react-navigation-menu"
 
 import { ButtonProps } from "@/components/Buttons"
+import { ChevronNext } from "@/components/Chevron"
 import Link from "@/components/Link"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
@@ -27,7 +28,6 @@ import { cleanPath } from "@/lib/utils/url"
 import type { Level, NavItem, NavSectionKey } from "../types"
 
 import ItemContent from "./ItemContent"
-import NextChevron from "./NextChevron"
 import { useSubMenu } from "./useSubMenu"
 
 type LvlContentProps = {
@@ -83,7 +83,7 @@ const SubMenu = ({ lvl, items, activeSection, onClose }: LvlContentProps) => {
                 const buttonProps: ButtonProps = {
                   color: menuColors.body,
                   leftIcon: lvl === 1 && icon ? <Icon as={icon} /> : undefined,
-                  rightIcon: isLink ? undefined : <NextChevron />,
+                  rightIcon: isLink ? undefined : <ChevronNext />,
                   position: "relative",
                   w: "full",
                   me: -PADDING,