Merge remote-tracking branch 'origin/main' into translate-useeffect

Author: mekarthedev

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -49,44 +49,43 @@ export function SidebarLink({
     target = '_blank';
   }
   return (
-    <Link href={href}>
-      <a
-        ref={ref}
-        title={title}
-        target={target}
-        aria-current={selected ? 'page' : undefined}
-        className={cn(
-          'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
-          {
-            'text-sm pl-6': level > 0,
-            'pl-5': level < 2,
-            'text-base font-bold': level === 0,
-            'text-primary dark:text-primary-dark': level === 0 && !selected,
-            'text-base text-secondary dark:text-secondary-dark':
-              level > 0 && !selected,
-            'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
-              selected,
-            'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
-              isPending,
-          }
-        )}>
-        {/* This here needs to be refactored ofc */}
+    <Link
+      href={href}
+      ref={ref}
+      title={title}
+      target={target}
+      aria-current={selected ? 'page' : undefined}
+      className={cn(
+        'p-2 pr-2 w-full rounded-none lg:rounded-r-2xl text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
+        {
+          'text-sm pl-6': level > 0,
+          'pl-5': level < 2,
+          'text-base font-bold': level === 0,
+          'text-primary dark:text-primary-dark': level === 0 && !selected,
+          'text-base text-secondary dark:text-secondary-dark':
+            level > 0 && !selected,
+          'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
+            selected,
+          'dark:bg-gray-70 bg-gray-3 dark:hover:bg-gray-70 hover:bg-gray-3':
+            isPending,
+        }
+      )}>
+      {/* This here needs to be refactored ofc */}
+      <span
+        className={cn({
+          'text-gray-400 dark:text-gray-500': wip,
+        })}>
+        {title}
+      </span>
+      {isExpanded != null && !hideArrow && (
         <span
-          className={cn({
-            'text-gray-400 dark:text-gray-500': wip,
+          className={cn('pr-1', {
+            'text-link dark:text-link-dark': isExpanded,
+            'text-tertiary dark:text-tertiary-dark': !isExpanded,
           })}>
-          {title}
+          <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
         </span>
-        {isExpanded != null && !hideArrow && (
-          <span
-            className={cn('pr-1', {
-              'text-link dark:text-link-dark': isExpanded,
-              'text-tertiary dark:text-tertiary-dark': !isExpanded,
-            })}>
-            <IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
-          </span>
-        )}
-      </a>
+      )}
     </Link>
   );
 }

src/components/Layout/TopNav/TopNav.tsx

@@ -90,15 +90,17 @@ const githubIcon = (
   </svg>
 );
 
-function Link({href, children, ...props}: JSX.IntrinsicElements['a']) {
+function Link({
+  href,
+  children,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   return (
-    <NextLink href={`${href}`}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-      <a
-        className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
-        {...props}>
-        {children}
-      </a>
+    <NextLink
+      href={`${href}`}
+      className="inline text-primary dark:text-primary-dark hover:text-link hover:dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal"
+      {...props}>
+      {children}
     </NextLink>
   );
 }
@@ -247,16 +249,15 @@ export default function TopNav({
                 {isOpen ? <IconClose /> : <IconHamburger />}
               </button>
               <div className="3xl:flex-1 flex align-center">
-                <NextLink href="/">
-                  <a
-                    className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
-                    <Logo
-                      className={cn(
-                        'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
-                      )}
-                    />
-                    <span className="sr-only 3xl:not-sr-only">React</span>
-                  </a>
+                <NextLink
+                  href="/"
+                  className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
+                  <Logo
+                    className={cn(
+                      'text-sm mr-0 w-10 h-10 text-link dark:text-link-dark flex origin-center transition-all ease-in-out'
+                    )}
+                  />
+                  <span className="sr-only 3xl:not-sr-only">React</span>
                 </NextLink>
               </div>
             </div>