feat(lab): Add support for multiple versions in the lab

packages/freesewing.lab/components/header.js

@@ -4,6 +4,7 @@ import Link from 'next/link'
 import ThemePicker from 'shared/components/theme-picker.js'
 import LocalePicker from 'shared/components/locale-picker.js'
 import PatternPicker from 'site/components/pattern-picker.js'
+import VersionPicker from 'site/components/version-picker.js'
 import CloseIcon from 'shared/components/icons/close.js'
 import MenuIcon from 'shared/components/icons/menu.js'
 
@@ -67,6 +68,7 @@ const Header = ({ app }) => {
             </button>
             <div className="hidden sm:flex flex-row items-center">
               <PatternPicker app={app} />
+              <VersionPicker app={app} />
             </div>
             <div className="hidden md:flex md:flex-row gap-2">
               <Link href="/">

packages/freesewing.lab/components/pattern-picker.js

@@ -2,9 +2,12 @@ import React from 'react'
 import DesignIcon from 'shared/components/icons/design.js'
 import Link from 'next/link'
 import { useTranslation } from 'next-i18next'
+import useVersion from 'site/hooks/useVersion.js'
+import { formatVersionUri } from './version-picker.js'
 
 const PatternPicker = ({ app }) => {
   const { t } = useTranslation(['common'])
+  const version = useVersion()
 
   return (
       <div className="dropdown">
@@ -27,7 +30,7 @@ const PatternPicker = ({ app }) => {
               </li>
               {app.patterns[section].map(pattern => (
                 <li key={pattern}>
-                  <Link href={`/${section}/${pattern}`}>
+                  <Link href={formatVersionUri(version, pattern)}>
                     <button className="btn btn-ghost">
                       <span className="text-base-content">
                         {pattern}

packages/freesewing.lab/components/version-picker.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import VersionsIcon from 'shared/components/icons/versions.js'
+import Link from 'next/link'
+import { useTranslation } from 'next-i18next'
+import versions from 'site/versions.json'
+import useVersion from 'site/hooks/useVersion.js'
+
+export const defaultVersion = 'next'
+
+export const formatVersionTitle = version => (!version || version === defaultVersion)
+  ? `${defaultVersion} version`
+  : `Version ${version}`
+
+export const formatVersionUri = (version=false, design=false) => {
+  if (!version && !design) return '/'
+  if (!version && design) return `/${design}`
+  if (version && !design) return `/v/${version}`
+
+  return `/v/${version}/${design}`
+}
+
+const PatternPicker = ({ app }) => {
+  const { t } = useTranslation(['common'])
+  const version = useVersion()
+
+  return (
+      <div className="dropdown">
+        <div tabIndex="0" className={`
+          m-0 btn btn-neutral flex flex-row gap-2
+          sm:btn-ghost
+          hover:bg-neutral hover:border-neutral-content
+        `}>
+          <VersionsIcon />
+          <span>{formatVersionTitle(version)}</span>
+        </div>
+        <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 overflow-y-scroll navdrop">
+          {[defaultVersion, ...versions].map(v => (
+            <li key={v}>
+              <Link href={formatVersionUri(v)}>
+                <button className="btn btn-ghost">
+                  <span className="text-base-content captialize">
+                    {formatVersionTitle(v)}
+                  </span>
+                </button>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+  )
+}
+
+export default PatternPicker