chore: Rework version adoption calculation

Author: franky47

packages/docs/src/app/(pages)/stats/_components/version-adoption.tsx

@@ -1,8 +1,10 @@
 'use client'
 
-import { LineChart } from '@tremor/react'
+import { LineChart, Tab, TabGroup, TabList } from '@tremor/react'
 import { Boxes } from 'lucide-react'
+import { useQueryState } from 'nuqs'
 import { formatStatNumber } from '../lib/format'
+import { pkgOptions, pkgParser } from '../searchParams'
 import { Widget } from './widget'
 
 type VersionProps = {
@@ -25,13 +27,30 @@ type VersionProps = {
 // stroke-purple-500 fill-purple-500 bg-purple-500 text-purple-500
 
 export function Versions({ records, versions }: VersionProps) {
+  const [activeTab, setActiveTab] = useQueryState(
+    'pkg',
+    pkgParser.withOptions({
+      shallow: false
+    })
+  )
   return (
     <Widget
       className="lg:col-span-2"
       title={
         <>
           <Boxes size={24} strokeWidth={1.5} />
           Version adoption
+          <TabGroup
+            className="ml-auto w-auto"
+            index={pkgOptions.indexOf(activeTab)}
+            onIndexChange={index => setActiveTab(pkgOptions[index])}
+          >
+            <TabList variant="solid">
+              <Tab>nuqs</Tab>
+              <Tab>next-usequerystate</Tab>
+              <Tab>combined</Tab>
+            </TabList>
+          </TabGroup>
         </>
       }
     >

packages/docs/src/app/(pages)/stats/_components/versions.tsx

@@ -17,7 +17,9 @@ export function Widget({
       className={cn('px-4 py-0 pb-2 pt-4 dark:bg-background', className)}
       {...props}
     >
-      <h3 className="flex items-center gap-2 text-lg font-bold">{title}</h3>
+      <h3 className="flex flex-wrap items-center gap-2 text-lg font-bold">
+        {title}
+      </h3>
       {children}
     </Card>
   )