feat: add currentMaiaModel selector to GameInfo component

Author: kevinjosethomas

src/components/Misc/GameInfo.tsx

@@ -8,21 +8,49 @@ interface Props {
   title: string
   type: InstructionsType
   children: React.ReactNode
+  currentMaiaModel?: string
+  setCurrentMaiaModel?: (model: string) => void
+  MAIA_MODELS?: string[]
 }
 
 export const GameInfo: React.FC<Props> = ({
   icon,
   title,
   type,
   children,
+  currentMaiaModel,
+  setCurrentMaiaModel,
+  MAIA_MODELS,
 }: Props) => {
   const { setInstructionsModalProps } = useContext(ModalContext)
+
   return (
     <div className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden bg-background-1 p-3 md:rounded">
       <div className="flex w-full items-center justify-between">
         <div className="flex items-center justify-start gap-1.5">
           <span className="material-symbols-outlined text-xl">{icon}</span>
           <h2 className="text-xl font-semibold">{title}</h2>
+          {currentMaiaModel && setCurrentMaiaModel && (
+            <p className="flex items-center gap-1 text-sm md:hidden">
+              using
+              <div className="relative inline-flex items-center gap-0.5">
+                <select
+                  value={currentMaiaModel}
+                  className="cursor-pointer appearance-none bg-transparent focus:outline-none"
+                  onChange={(e) => setCurrentMaiaModel(e.target.value)}
+                >
+                  {MAIA_MODELS?.map((model) => (
+                    <option value={model} key={model}>
+                      {model.replace('maia_kdd_', 'Maia ')}
+                    </option>
+                  ))}
+                </select>
+                <span className="material-symbols-outlined pointer-events-none text-sm">
+                  arrow_drop_down
+                </span>
+              </div>
+            </p>
+          )}
         </div>
         <button
           className="material-symbols-outlined duration-200 hover:text-human-3"

src/pages/analysis/[...id].tsx

@@ -583,7 +583,14 @@ const Analysis: React.FC<Props> = ({
     <>
       <div className="flex h-full flex-1 flex-col justify-center gap-1">
         <div className="flex w-full flex-col items-start justify-start gap-1">
-          <GameInfo title="Analysis" icon="bar_chart" type="analysis">
+          <GameInfo
+            title="Analysis"
+            icon="bar_chart"
+            type="analysis"
+            currentMaiaModel={currentMaiaModel}
+            setCurrentMaiaModel={setCurrentMaiaModel}
+            MAIA_MODELS={MAIA_MODELS}
+          >
             <NestedGameInfo />
           </GameInfo>
           <div className="relative flex h-[100vw] w-screen">