reduce duplication

Author: birkskyum

src/components/DocsLayout.tsx

@@ -321,29 +321,32 @@ const PrevNextButton = ({
   currentFramework: string
   params: Record<string, string>
 }) => {
+  const buttonContent = (
+    <div className="flex gap-2 items-center font-bold">
+      {direction === 'prev' ? (
+        <>
+          <FaArrowLeft />
+          {item.label}
+        </>
+      ) : (
+        <>
+          <span
+            className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
+          >
+            {item.label}
+          </span>{' '}
+          <FaArrowRight className={textColor} />
+        </>
+      )}
+    </div>
+  );
+
+  const buttonClassName = "py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden";
+
   if (item.to.startsWith('http')) {
     return (
-      <a
-        href={item.to}
-        className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
-      >
-        <div className="flex gap-2 items-center font-bold">
-          {direction === 'prev' ? (
-            <>
-              <FaArrowLeft />
-              {item.label}
-            </>
-          ) : (
-            <>
-              <span
-                className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
-              >
-                {item.label}
-              </span>{' '}
-              <FaArrowRight className={textColor} />
-            </>
-          )}
-        </div>
+      <a href={item.to} className={buttonClassName}>
+        {buttonContent}
       </a>
     )
   }
@@ -369,25 +372,9 @@ const PrevNextButton = ({
               _splat: item.to,
             }),
       }}
-      className="py-1 px-2 bg-white/70 text-black dark:bg-gray-500/40 dark:text-white shadow-lg shadow-black/20 flex items-center justify-center backdrop-blur-sm z-20 rounded-lg overflow-hidden"
+      className={buttonClassName}
     >
-      <div className="flex gap-2 items-center font-bold">
-        {direction === 'prev' ? (
-          <>
-            <FaArrowLeft />
-            {item.label}
-          </>
-        ) : (
-          <>
-            <span
-              className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
-            >
-              {item.label}
-            </span>{' '}
-            <FaArrowRight className={textColor} />
-          </>
-        )}
-      </div>
+      {buttonContent}
     </Link>
   )
 }