Fix list of renderers on mobile

apps/frontpage/components/docs/renderers/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { renderers } from '@repo/utils';
-import type { FC } from 'react';
+import { useEffect, useState, type FC } from 'react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,67 +10,80 @@ import {
 } from '@repo/ui';
 import { useDocs } from '../../../app/docs/provider';
 import { Button } from './button';
+import { useMediaQuery } from '../../../hooks/use-media-query';
 
 interface RenderersProps {
   activeRenderer: string;
 }
 
 export const Renderers: FC<RenderersProps> = () => {
   const { activeRenderer, setRenderer } = useDocs();
+  const [isMobile] = useMediaQuery('(max-width: 480px)');
+  const [firstList, setFirstList] = useState(renderers.slice(0, 3));
+  const [lastRenderer, setLastRenderer] = useState(renderers[3]);
+  const [localRenderer, setLocalRenderer] = useState('react');
 
-  const firstThreeRenderers = renderers.slice(0, 3);
-  const isInFirstThree = firstThreeRenderers.some(
-    (renderer) => renderer.id === activeRenderer,
-  );
-  const isInFirstFour = renderers
-    .slice(0, 4)
-    .some((renderer) => renderer.id === activeRenderer);
-  const activeRendererObj = renderers.find(
-    (renderer) => renderer.id === activeRenderer,
-  );
-  const fourthRenderer = renderers[3];
-  const restRenderers =
-    !isInFirstFour && fourthRenderer
-      ? [fourthRenderer, ...renderers.slice(4)].filter(
-          (r) => r.id !== activeRenderer,
-        )
-      : renderers.slice(4);
+  useEffect(() => {
+    if (isMobile) {
+      setFirstList(renderers.slice(0, 2));
+      setLastRenderer(renderers[2]);
+    } else {
+      setFirstList(renderers.slice(0, 3));
+      setLastRenderer(renderers[3]);
+    }
+
+    const isInFirstList = firstList.some(
+      (renderer) => renderer.id === localRenderer,
+    );
+    const activeRendererObj = renderers.find(
+      (renderer) => renderer.id === localRenderer,
+    );
+
+    if (!isInFirstList && activeRendererObj) {
+      setLastRenderer(activeRendererObj);
+    }
+  }, [isMobile, activeRenderer]);
+
+  useEffect(() => {
+    if (activeRenderer) setLocalRenderer(activeRenderer);
+  }, [activeRenderer]);
+
+  const restRenderers = renderers.filter((r) => {
+    return !firstList.includes(r) && r !== lastRenderer;
+  });
 
   return (
-    <div className="flex gap-2 mb-8">
-      {firstThreeRenderers.map((renderer) => (
+    <div className="mb-8 flex gap-2">
+      {firstList.map((renderer) => (
         <Button
-          active={renderer.id === activeRenderer}
+          active={renderer.id === localRenderer}
           key={renderer.id}
-          onClick={() => { setRenderer(renderer.id); }}
+          onClick={() => {
+            setRenderer(renderer.id);
+          }}
         >
           {renderer.title}
         </Button>
       ))}
-      {!isInFirstThree && activeRendererObj ? (
-        <Button
-          active={activeRendererObj.id === activeRenderer}
-          onClick={() => { setRenderer(activeRendererObj.id); }}
-        >
-          {activeRendererObj.title}
-        </Button>
-      ) : (
-        <Button
-          active={fourthRenderer?.id === activeRenderer}
-          onClick={() => { setRenderer(fourthRenderer?.id || ''); }}
-        >
-          {fourthRenderer?.title || ''}
-        </Button>
-      )}
+      <Button
+        active={lastRenderer?.id === localRenderer}
+        onClick={() => {
+          setRenderer(lastRenderer?.id || '');
+        }}
+      >
+        {lastRenderer?.title || ''}
+      </Button>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button arrow>More</Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" collisionPadding={8}>
           {restRenderers.map((renderer) => (
             <DropdownMenuItem
               key={renderer.id}
-              onClick={() => { setRenderer(renderer.id); }}
+              onClick={() => {
+                setRenderer(renderer.id);
+              }}
             >
               {renderer.title}
             </DropdownMenuItem>