Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,534 Bytes
c1f12bf 59f9b88 c1f12bf 59f9b88 c1f12bf 57224ff 4cd0916 57224ff c1f12bf 57224ff 59f9b88 c1f12bf 59f9b88 c1f12bf 59f9b88 c1f12bf 59f9b88 c1f12bf 59f9b88 c1f12bf 57224ff 59f9b88 ac29ac4 c1f12bf 59f9b88 c1f12bf |
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 |
import { useState, useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogFooter } from '@/components/ui/dialog'
import { ScrollArea } from '@/components/ui/scroll-area'
import { cn } from '@/lib/utils'
import { useUI } from '@/services'
import { SettingsSectionProvider } from './provider'
import { SettingsSectionAssistant } from './assistant'
import { SettingsSectionEditors } from './editors'
import { SettingsSectionImage } from './image'
import { SettingsSectionVideo } from './video'
import { SettingsSectionSound } from './sound'
import { SettingsSectionMusic } from './music'
import { SettingsSectionVoice } from './voice'
import { SettingsCategory } from '@aitube/clapper-services'
const panels: Record<SettingsCategory, JSX.Element> = {
[SettingsCategory.NONE]: <></>,
[SettingsCategory.PROVIDER]: <SettingsSectionProvider />,
[SettingsCategory.ASSISTANT]: <SettingsSectionAssistant />,
[SettingsCategory.EDITORS]: <SettingsSectionEditors />,
[SettingsCategory.IMAGE]: <SettingsSectionImage />,
[SettingsCategory.VIDEO]: <SettingsSectionVideo />,
[SettingsCategory.VOICE]: <SettingsSectionVoice />,
[SettingsCategory.SOUND]: <SettingsSectionSound />,
[SettingsCategory.MUSIC]: <SettingsSectionMusic />,
}
const panelLabels = {
[SettingsCategory.NONE]: '',
[SettingsCategory.PROVIDER]: 'Providers',
[SettingsCategory.ASSISTANT]: 'Assistant',
[SettingsCategory.EDITORS]: 'Editors',
[SettingsCategory.IMAGE]: 'Image',
[SettingsCategory.VIDEO]: 'Video',
[SettingsCategory.VOICE]: 'Voice',
[SettingsCategory.SOUND]: 'Sound',
[SettingsCategory.MUSIC]: 'Music',
} as any
export function SettingsDialog() {
const showSettings = useUI((s) => s.showSettings)
const setShowSettings = useUI((s) => s.setShowSettings)
return (
<Dialog
open={showSettings !== SettingsCategory.NONE}
onOpenChange={(open) =>
setShowSettings(
open ? SettingsCategory.PROVIDER : SettingsCategory.NONE
)
}
>
<DialogContent
className={cn(
`select-none`,
// DialogContent comes with some hardcoded values so we need to override them
`h-[70%] w-[95w] max-w-6xl md:w-[60vw]`,
`flex flex-row`
)}
>
<ScrollArea className="flex h-full w-44 flex-col">
<div className="flex flex-col items-end">
{Object.keys(panels).map((key) => (
<Button
key={key}
variant="ghost"
className="flex w-full flex-col items-end text-right text-lg font-thin capitalize text-stone-300"
onClick={() => setShowSettings(key as SettingsCategory)}
>
{panelLabels[key]}
</Button>
))}
</div>
</ScrollArea>
<div className="flex h-full max-w-[calc(100%-150px)] flex-grow select-none flex-col justify-between border-l border-stone-800 pl-8">
<ScrollArea className="flex h-full flex-row">
{panels[showSettings]}
</ScrollArea>
<DialogFooter>
<Button
variant="outline"
className="text-sm font-light dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400"
onClick={() => {
setShowSettings(SettingsCategory.NONE)
}}
>
Close
</Button>
</DialogFooter>
</div>
</DialogContent>
</Dialog>
)
}
|