feat: implemented "Jump to Section" menu for Tooling page

components/ui/button.tsx

@@ -37,24 +37,56 @@ const buttonVariants = cva(
   },
 );
 
+type ButtonProps = Omit<React.ComponentProps<'button'>, 'size'> &
+  Omit<React.ComponentProps<'select'>, 'size'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    selectButton?: boolean;
+  };
+
 function Button({
   className,
   variant,
   size,
   asChild = false,
+  selectButton = false,
+  children,
   ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
+}: ButtonProps) {
+  if (selectButton) {
+    return (
+      <div className='relative inline-flex'>
+        <select
+          data-slot='select-button'
+          className={cn(
+            buttonVariants({ variant, size }),
+            'appearance-none cursor-pointer pr-8',
+            className,
+          )}
+          {...(props as React.ComponentProps<'select'>)}
+        >
+          {children}
+        </select>
+
+        <div className='pointer-events-none absolute inset-y-0 right-2 flex items-center'>
+          <svg className='h-4 w-4 fill-current opacity-70' viewBox='0 0 20 20'>
+            <path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' />
+          </svg>
+        </div>
+      </div>
+    );
+  }
+
   const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
       data-slot='button'
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
-    />
+    >
+      {children}
+    </Comp>
   );
 }
 

pages/tools/components/GroupByMenu.tsx

@@ -5,11 +5,25 @@ import { Transform } from '../hooks/useToolsTransform';
 interface GroupByMenuProps {
   transform: Transform;
   setTransform: Dispatch<SetStateAction<Transform>>;
+  activeSections?: string[];
 }
 
-const GroupByMenu = ({ transform, setTransform }: GroupByMenuProps) => {
+const GroupByMenu = ({
+  transform,
+  setTransform,
+  activeSections = [],
+}: GroupByMenuProps) => {
   const groupedBy = transform.groupBy;
 
+  const scrollToSection = (section: string) => {
+    const id = `group-${section}`;
+    const element = document.getElementById(id);
+    if (element) {
+      const y = element.getBoundingClientRect().top + window.scrollY - 100;
+      window.scrollTo({ top: y, behavior: 'smooth' });
+    }
+  };
+
   const groupBy = [
     {
       label: 'None',
@@ -36,21 +50,43 @@ const GroupByMenu = ({ transform, setTransform }: GroupByMenuProps) => {
   };
 
   return (
-    <div className='ml-2 my-8 flex items-center space-x-2 max-w-screen overflow-x-auto'>
-      <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
-      {groupBy.map((group) => {
-        return (
-          <Button
-            key={group.accessorKey}
-            value={group.accessorKey}
-            onClick={setGroupBy}
-            variant={groupedBy === group.accessorKey ? 'default' : 'outline'}
-            className={`${groupedBy === group.accessorKey ? 'text-white dark:text-slate-900 dark:bg-[#bfdbfe]' : 'dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent'}`}
-          >
-            {group.label}
-          </Button>
-        );
-      })}
+    <div className='ml-2 my-8 flex flex-col md:flex-row items-start md:items-center gap-4 w-full'>
+      <div className='flex items-center space-x-2 max-w-screen overflow-x-auto'>
+        <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
+        {groupBy.map((group) => {
+          return (
+            <Button
+              key={group.accessorKey}
+              value={group.accessorKey}
+              onClick={setGroupBy}
+              variant={groupedBy === group.accessorKey ? 'default' : 'outline'}
+              className={`${groupedBy === group.accessorKey ? 'text-white dark:text-slate-900 dark:bg-[#bfdbfe]' : 'dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent'}`}
+            >
+              {group.label}
+            </Button>
+          );
+        })}
+      </div>
+      {activeSections.length > 0 && groupedBy !== 'none' && (
+        <Button
+          selectButton
+          variant='outline'
+          defaultValue=''
+          onChange={(e) =>
+            scrollToSection((e.target as HTMLSelectElement).value)
+          }
+          className='dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent'
+        >
+          <option value='' disabled>
+            Jump to
+          </option>
+          {activeSections.map((section) => (
+            <option key={section} value={section}>
+              {section}
+            </option>
+          ))}
+        </Button>
+      )}
     </div>
   );
 };

pages/tools/index.page.tsx

@@ -217,7 +217,13 @@ export default function ToolingPage({
 
           <div className='flex flex-wrap items-center justify-between gap-4 mb-6'>
             <div className='flex items-center gap-4'>
-              <GroupByMenu transform={transform} setTransform={setTransform} />
+              <GroupByMenu
+                transform={transform}
+                setTransform={setTransform}
+                activeSections={Object.keys(toolsByGroup).filter(
+                  (g) => g !== 'none' && toolsByGroup[g].length > 0,
+                )}
+              />
             </div>
             <div className='flex items-center gap-4'>
               <div className='text-sm text-gray-500 hidden sm:block'>