fix prev and next links

Author: birkskyum

src/components/DocsLayout.tsx

@@ -73,6 +73,7 @@ function useCurrentFramework(frameworks: Framework[]) {
   const setFramework = React.useCallback(
     (framework: string) => {
       navigate({
+        to: '.',
         params: (prev) => ({
           ...prev,
           framework,
@@ -142,6 +143,7 @@ function useCurrentVersion(versions: string[]) {
   const setVersion = React.useCallback(
     (version: string) => {
       navigate({
+        to: '.',
         params: (prev: Record<string, string>) => ({
           ...prev,
           version,
@@ -300,6 +302,84 @@ const useVersionConfig = ({ versions }: { versions: string[] }) => {
   return versionConfig
 }
 
+const PrevNextButton = ({
+  item,
+  direction,
+  colorFrom,
+  colorTo,
+  textColor,
+  libraryId,
+  currentFramework,
+  params,
+}: {
+  item: { to: string; label: React.ReactNode }
+  direction: 'prev' | 'next'
+  colorFrom: string
+  colorTo: string
+  textColor: string
+  libraryId: string
+  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={buttonClassName}>
+        {buttonContent}
+      </a>
+    )
+  }
+
+  return (
+    <Link
+      to={
+        item.to.startsWith('/')
+          ? item.to
+          : item.to.includes('framework/')
+          ? '/$libraryId/$version/docs/framework/$framework/$'
+          : '/$libraryId/$version/docs/$'
+      }
+      params={{
+        libraryId,
+        version: params.version || 'latest',
+        ...(item.to.includes('framework/')
+          ? {
+              framework: currentFramework,
+              _splat: item.to.split('/').slice(2).join('/'),
+            }
+          : {
+              _splat: item.to,
+            }),
+      }}
+      className={buttonClassName}
+    >
+      {buttonContent}
+    </Link>
+  )
+}
+
 type DocsLayoutProps = {
   name: string
   version: string
@@ -327,8 +407,9 @@ export function DocsLayout({
 }: DocsLayoutProps) {
   const params = useParams({ strict: false })
   const libraryId = params.libraryId || ''
-
   const { _splat } = params
+
+  const { framework: currentFramework } = useCurrentFramework(frameworks)
   const frameworkConfig = useFrameworkConfig({ frameworks })
   const versionConfig = useVersionConfig({ versions })
   const menuConfig = useMenuConfig({ config, frameworks, repo })
@@ -580,34 +661,30 @@ export function DocsLayout({
         <div className="sticky flex items-center flex-wrap bottom-2 z-10 right-0 text-xs md:text-sm px-1 print:hidden">
           <div className="w-1/2 px-1 flex justify-end flex-wrap">
             {prevItem ? (
-              <Link
-                to={prevItem.to}
-                params
-                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">
-                  <FaArrowLeft />
-                  {prevItem.label}
-                </div>
-              </Link>
+              <PrevNextButton
+                item={prevItem}
+                direction="prev"
+                colorFrom={colorFrom}
+                colorTo={colorTo}
+                textColor={textColor}
+                libraryId={libraryId}
+                currentFramework={currentFramework}
+                params={params}
+              />
             ) : null}
           </div>
           <div className="w-1/2 px-1 flex justify-start flex-wrap">
             {nextItem ? (
-              <Link
-                to={nextItem.to}
-                params
-                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">
-                  <span
-                    className={`bg-gradient-to-r ${colorFrom} ${colorTo} bg-clip-text text-transparent`}
-                  >
-                    {nextItem.label}
-                  </span>{' '}
-                  <FaArrowRight className={textColor} />
-                </div>
-              </Link>
+              <PrevNextButton
+                item={nextItem}
+                direction="next"
+                colorFrom={colorFrom}
+                colorTo={colorTo}
+                textColor={textColor}
+                libraryId={libraryId}
+                currentFramework={currentFramework}
+                params={params}
+              />
             ) : null}
           </div>
         </div>