Merge remote-tracking branch 'origin/main' into prod

JiscSD · Oct 10, 2023 · 3f00c36 · 3f00c36
2 parents 4151bb1 + d5d3569
commit 3f00c36
Showing 1 changed file with 25 additions and 14 deletions.
diff --git a/ui/src/components/Nav/Desktop/index.tsx b/ui/src/components/Nav/Desktop/index.tsx
@@ -1,10 +1,33 @@
 import React from 'react';
 import * as OutlineIcons from '@heroicons/react/24/outline';
 import * as HeadlessUI from '@headlessui/react';
-
 import * as Components from '@components';
 import * as Interfaces from '@interfaces';
 
+type FlickerLessLinkProps = {
+    subItem: Interfaces.NavMenuItem;
+    active: boolean;
+};
+
+const FlickerLessLink = React.forwardRef<HTMLAnchorElement, FlickerLessLinkProps>((props, ref) => {
+    const { label, value, onClick } = props.subItem;
+
+    return (
+        <Components.Link
+            ref={ref}
+            href={value}
+            onClick={onClick}
+            className={`${
+                props.active ? 'ring-yellow-400 hover:ring-transparent active:ring-yellow-400 ' : 'ring-transparent'
+            } text-white m-0 block w-full rounded-md p-1 ring-2`}
+        >
+            {label}
+        </Components.Link>
+    );
+});
+
+FlickerLessLink.displayName = 'FlickerLessLink';
+
 type Props = {
     items: Interfaces.NavMenuItem[];
 };
@@ -44,19 +67,7 @@ const Desktop: React.FC<Props> = (props): React.ReactElement => (
                                             className="p-2 text-teal-600 transition-colors duration-500 dark:text-white-50"
                                         >
                                             <HeadlessUI.Menu.Item>
-                                                {({ active }) => (
-                                                    <Components.Link
-                                                        href={subItem.value}
-                                                        onClick={subItem.onClick}
-                                                        className={`${
-                                                            active
-                                                                ? 'ring-yellow-400 hover:ring-transparent active:ring-yellow-400 '
-                                                                : 'ring-transparent'
-                                                        } text-white m-0 block w-full rounded-md p-1 ring-2`}
-                                                    >
-                                                        {subItem.label}
-                                                    </Components.Link>
-                                                )}
+                                                {({ active }) => <FlickerLessLink subItem={subItem} active={active} />}
                                             </HeadlessUI.Menu.Item>
                                         </li>
                                     ))}