feat: add qwik, angular, and vanilla framework options for table (#196)

Author: KevinVandy

app/components/DocsLayout.tsx

@@ -284,6 +284,10 @@ export function DocsLayout({
                                   ? 'text-green-500'
                                   : child.badge === 'angular'
                                   ? 'text-fuchsia-500'
+                                  : child.badge === 'qwik'
+                                  ? 'text-indigo-500'
+                                  : child.badge === 'vanilla'
+                                  ? 'text-gray-300'
                                   : 'text-gray-500'
                               }`}
                             >

app/images/js-logo.svg

@@ -2,7 +2,10 @@ 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'
+import angularLogo from '~/images/angular-logo.svg'
+import qwikLogo from '~/images/qwik-logo.svg'
+import vanillaLogo from '~/images/js-logo.svg'
+import { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/table'
 
@@ -15,13 +18,16 @@ export const colorTo = 'to-blue-600'
 export const textColor = 'text-blue-600'
 
 export const frameworks: AvailableOptions = [
+  { label: 'Angular', value: 'angular', logo: angularLogo },
+  { label: 'Qwik', value: 'qwik', logo: qwikLogo },
   { label: 'React', value: 'react', logo: reactLogo },
   { label: 'Solid', value: 'solid', logo: solidLogo },
   { label: 'Svelte', value: 'svelte', logo: svelteLogo },
   { label: 'Vue', value: 'vue', logo: vueLogo },
+  { label: 'Vanilla', value: 'vanilla', logo: vanillaLogo },
 ]
 
-export type Framework = keyof typeof frameworks
+export type Framework = (typeof frameworks)[number]['value']
 
 export function getBranch(argVersion?: string) {
   const version = argVersion || latestVersion

app/images/qwik-logo.svg

@@ -407,10 +407,13 @@ export default function ReactTableRoute() {
           <div className="flex flex-wrap gap-2 justify-center">
             {(
               [
+                { label: 'Angular', value: 'angular' },
+                { label: 'Qwik', value: 'qwik' },
                 { label: 'React', value: 'react' },
                 { label: 'Solid', value: 'solid' },
                 { label: 'Svelte', value: 'svelte' },
                 { label: 'Vue', value: 'vue' },
+                { label: 'Vanilla', value: 'vanilla' },
               ] as const
             ).map((item) => (
               <button