Spaces:
Runtime error
Runtime error
File size: 3,381 Bytes
fd2aa6b e0c4dc2 fd2aa6b e0c4dc2 fd2aa6b e0c4dc2 fd2aa6b e0c4dc2 fd2aa6b e0c4dc2 fd2aa6b e66b0b0 fd2aa6b e66b0b0 fd2aa6b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
"use client"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Game, GameType } from "@/app/games/types"
import { games } from "@/app/games"
import { Engine, EngineType, engines } from "@/app/engine/engines"
import { cn } from "@/lib/utils"
export function TopMenu({
engine,
defaultGame,
game,
debug,
clearCache,
onChangeEngine,
onChangeGame,
onToggleDebug,
onToggleClearCache,
}: {
engine: Engine,
defaultGame: string
game: Game
debug: boolean
clearCache: boolean
onChangeEngine: (newEngine: EngineType) => void
onChangeGame: (newGameType: GameType) => void
onToggleDebug: (isToggledOn: boolean) => void
onToggleClearCache: (shouldClearCache: boolean) => void
}) {
return (
<div className={cn(
`z-10 fixed top-0 left-0 right-0`,
`flex flex-row w-full justify-between items-center`,
`backdrop-blur-xl`,
`px-2 py-2 border-b-1 border-gray-50 dark:border-gray-50`,
`bg-stone-900/50 dark:bg-stone-900/50 text-gray-50 dark:text-gray-50`
)}>
<div className="flex flex-row items-center space-x-3 font-mono">
<Label className="flex text-sm">Select a story:</Label>
<Select
defaultValue={defaultGame}
onValueChange={(value) => { onChangeGame(value as GameType) }}>
<SelectTrigger className="w-[180px]">
<SelectValue className="text-sm" placeholder="Type" />
</SelectTrigger>
<SelectContent>
{Object.entries(games).map(([key, game]) =>
<SelectItem key={key} value={key}>{game.title}</SelectItem>
)}
</SelectContent>
</Select>
</div>
<div className="flex flex-row items-center space-x-3 font-mono">
<Switch
checked={debug}
onCheckedChange={onToggleDebug}
// we won't disable it, so we can occupy our using while loading
// disabled={isLoading}
/>
<Label>Debug</Label>
</div>
<div className="flex flex-row items-center space-x-3 font-mono">
<Switch
checked={clearCache}
onCheckedChange={onToggleClearCache}
/>
<Label>No cache</Label>
</div>
<div className="flex flex-row items-center space-x-3 font-mono">
<Label className="flex text-sm">Engine:</Label>
<Select
defaultValue={game.engines.includes(engine.type) ? engine.type : game.engines[0]}
onValueChange={(value) => { onChangeEngine(value as EngineType) }}>
<SelectTrigger className="w-[300px]">
<SelectValue className="text-sm" placeholder="Type" />
</SelectTrigger>
<SelectContent>
{Object.entries(engines)
.filter(([_, engine]) => engine.visible)
.map(([key, engine]) =>
<SelectItem
key={key}
value={key}
disabled={
!engine.enabled || !game.engines.includes(engine.type)
}>{
engine.label
} ({
engine.modelName
})</SelectItem>
)}
</SelectContent>
</Select>
</div>
</div>
)
} |