Make frameworks a list

wandb · Apr 3, 2024 · 0282ec0 · 0282ec0
1 parent 094509c
commit 0282ec0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 35 deletions.
diff --git a/frontend/src/components/CodeViewer.tsx b/frontend/src/components/CodeViewer.tsx
@@ -16,6 +16,7 @@ import {
 	convertFrameworkAtom,
 	historyAtomFamily,
 	selectedFrameworkAtom,
+	FRAMEWORKS,
 	type Framework
 } from 'state'
 import { downloadStringAsFile } from '../lib/utils'
@@ -146,41 +147,16 @@ export default function CodeViewer({ id, code, shared }: ViewerProps) {
 								<DropdownMenuContent side='top'>
 									<DropdownMenuLabel>Convert to</DropdownMenuLabel>
 									<DropdownMenuSeparator />
-									<DropdownMenuItem
-										onClick={() => {
-											setConvertFramework('web component')
-										}}
-									>
-										Web Component
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => {
-											setConvertFramework('react')
-										}}
-									>
-										React
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => {
-											setConvertFramework('preact')
-										}}
-									>
-										Preact
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => {
-											setConvertFramework('svelte')
-										}}
-									>
-										Svelte
-									</DropdownMenuItem>
-									<DropdownMenuItem
-										onClick={() => {
-											setConvertFramework('vue')
-										}}
-									>
-										Vue
-									</DropdownMenuItem>
+									{FRAMEWORKS.map(f => (
+										<DropdownMenuItem
+											key={f}
+											onClick={() => {
+												setConvertFramework(f)
+											}}
+										>
+											{f.toLocaleUpperCase()}
+										</DropdownMenuItem>
+									))}
 								</DropdownMenuContent>
 							</DropdownMenu>
 						</li>

diff --git a/frontend/src/state/atoms/history.ts b/frontend/src/state/atoms/history.ts
@@ -10,6 +10,8 @@ export type Framework =
 	| 'vue'
 	| 'web component'
 
+export const FRAMEWORKS: Framework[] = ['preact', 'react', 'svelte', 'vue', 'web component'];
+
 export type FrameworkMap = {
 	[K in Framework]?: string
 }