refactor: <Select /> takes array of options rather than object of objects

app/components/DocsLayout.tsx

@@ -32,7 +32,8 @@ function useCurrentFramework(frameworks: AvailableOptions) {
 
   return (
     paramsFramework ||
-    (localStorageFramework && localStorageFramework in frameworks
+    (localStorageFramework &&
+    frameworks.find(({ value }) => localStorageFramework === value)
       ? localStorageFramework
       : 'react')
   )
@@ -110,7 +111,7 @@ const useFrameworkConfig = ({
   const frameworkConfig = React.useMemo(() => {
     return {
       label: 'Framework',
-      selected: frameworks[framework] ? framework : 'react',
+      selected: framework,
       available: frameworks,
       onSelect: (option: { label: string; value: string }) => {
         const url = generatePath(match.id, {
@@ -142,18 +143,18 @@ const useVersionConfig = ({
   const versionConfig = React.useMemo(() => {
     const available = availableVersions.reduce(
       (acc: AvailableOptions, version) => {
-        acc[version] = {
+        acc.push({
           label: version,
           value: version,
-        }
+        })
         return acc
       },
-      {
-        latest: {
+      [
+        {
           label: 'Latest',
           value: 'latest',
         },
-      }
+      ]
     )
 
     return {
@@ -330,22 +331,18 @@ export function DocsLayout({
           dark:bg-gray-900"
         >
           <div className="flex gap-4">
-            {frameworkConfig?.selected ? (
-              <Select
-                label={frameworkConfig.label}
-                selected={frameworkConfig.selected}
-                available={frameworkConfig.available}
-                onSelect={frameworkConfig.onSelect}
-              />
-            ) : null}
-            {versionConfig?.selected ? (
-              <Select
-                label={versionConfig.label}
-                selected={versionConfig.selected}
-                available={versionConfig.available}
-                onSelect={versionConfig.onSelect}
-              />
-            ) : null}
+            <Select
+              label={frameworkConfig.label}
+              selected={frameworkConfig.selected}
+              available={frameworkConfig.available}
+              onSelect={frameworkConfig.onSelect}
+            />
+            <Select
+              label={versionConfig.label}
+              selected={versionConfig.selected}
+              available={versionConfig.available}
+              onSelect={versionConfig.onSelect}
+            />
           </div>
           {menuItems}
         </div>
@@ -364,24 +361,20 @@ export function DocsLayout({
         />
       </div>
       <div className="flex gap-2 px-4">
-        {frameworkConfig?.selected ? (
-          <Select
-            className="flex-[3_1_0%]"
-            label={frameworkConfig.label}
-            selected={frameworkConfig.selected}
-            available={frameworkConfig.available}
-            onSelect={frameworkConfig.onSelect}
-          />
-        ) : null}
-        {versionConfig?.selected ? (
-          <Select
-            className="flex-[2_1_0%]"
-            label={versionConfig.label}
-            selected={versionConfig.selected}
-            available={versionConfig.available}
-            onSelect={versionConfig.onSelect}
-          />
-        ) : null}
+        <Select
+          className="flex-[3_1_0%]"
+          label={frameworkConfig.label}
+          selected={frameworkConfig.selected}
+          available={frameworkConfig.available}
+          onSelect={frameworkConfig.onSelect}
+        />
+        <Select
+          className="flex-[2_1_0%]"
+          label={versionConfig.label}
+          selected={versionConfig.selected}
+          available={versionConfig.available}
+          onSelect={versionConfig.onSelect}
+        />
       </div>
       <div className="flex-1 flex flex-col gap-4 px-4 whitespace-nowrap overflow-y-auto text-base pb-[300px]">
         {menuItems}

app/components/Select.tsx

@@ -4,10 +4,11 @@ import { Listbox, Transition } from '@headlessui/react'
 import { HiCheck, HiChevronDown } from 'react-icons/hi'
 import { Form } from '@remix-run/react'
 
-export type AvailableOptions = Record<
-  string,
-  { label: string; value: string; logo?: string }
->
+export type AvailableOptions = Array<{
+  label: string
+  value: string
+  logo?: string
+}>
 
 export type SelectProps = {
   className?: string
@@ -24,7 +25,15 @@ export function Select({
   available,
   onSelect,
 }: SelectProps) {
-  const selectedOption = available[selected]
+  if (available.length === 0) {
+    return null
+  }
+
+  const selectedOption = available.find(({ value }) => selected === value)
+
+  if (!selectedOption) {
+    return null
+  }
 
   return (
     <div className={`top-16 w-full flex-1 ${className}`}>

app/projects/form.ts

@@ -1,6 +1,7 @@
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/form'
 
@@ -12,11 +13,11 @@ export const colorFrom = 'from-yellow-500'
 export const colorTo = 'to-yellow-600'
 export const textColor = 'text-yellow-600'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+]
 
 export type Framework = keyof typeof frameworks
 

app/projects/query.ts

@@ -3,6 +3,7 @@ import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/query'
 
@@ -14,13 +15,13 @@ export const colorFrom = 'from-red-500'
 export const colorTo = 'to-amber-500'
 export const textColor = 'text-amber-500'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
-  angular: { label: 'Angular', logo: angularLogo, value: 'angular' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+  { label: 'Svelte', value: 'svelte', logo: svelteLogo },
+  { label: 'Angular', value: 'angular', logo: angularLogo },
+]
 
 export type Framework = keyof typeof frameworks
 

app/projects/ranger.ts

@@ -1,4 +1,5 @@
 import reactLogo from '~/images/react-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/ranger'
 
@@ -10,9 +11,9 @@ export const colorFrom = 'from-lime-500'
 export const colorTo = 'to-emerald-500'
 export const textColor = 'text-emerald-500'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+]
 
 export type Framework = keyof typeof frameworks
 

app/projects/router.ts

@@ -1,4 +1,5 @@
 import reactLogo from '~/images/react-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/router'
 
@@ -10,9 +11,9 @@ export const colorFrom = 'from-lime-500'
 export const colorTo = 'to-emerald-500'
 export const textColor = 'text-emerald-500'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+]
 
 export type Framework = keyof typeof frameworks
 

app/projects/store.ts

@@ -2,6 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/store'
 
@@ -13,12 +14,12 @@ export const colorFrom = 'from-gray-500'
 export const colorTo = 'to-gray-700'
 export const textColor = 'text-gray-700'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-  angular: { label: 'Angular', logo: angularLogo, value: 'angular' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+  { label: 'Angular', value: 'angular', logo: angularLogo },
+]
 
 export type Framework = keyof typeof frameworks
 

app/projects/table.ts

@@ -2,6 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/table'
 
@@ -13,12 +14,12 @@ export const colorFrom = 'from-teal-500'
 export const colorTo = 'to-blue-600'
 export const textColor = 'text-blue-600'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Svelte', value: 'svelte', logo: svelteLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+]
 
 export type Framework = keyof typeof frameworks
 

app/projects/virtual.ts

@@ -2,6 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/virtual'
 
@@ -13,12 +14,12 @@ export const colorFrom = 'from-rose-500'
 export const colorTo = 'to-violet-600'
 export const textColor = 'text-violet-600'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Svelte', value: 'svelte', logo: svelteLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+]
 
 export type Framework = keyof typeof frameworks