51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import RelaySettings from '@/components/RelaySettings'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import { toRelaySettings } from '@/lib/link'
|
|
import { SecondaryPageLink } from '@/PageManager'
|
|
import { useScreenSize } from '@/providers/ScreenSizeProvider'
|
|
import { Server } from 'lucide-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
export default function RelaySettingsButton({
|
|
variant = 'titlebar'
|
|
}: {
|
|
variant?: 'titlebar' | 'sidebar' | 'small-screen-titlebar'
|
|
}) {
|
|
const { t } = useTranslation()
|
|
const { isSmallScreen } = useScreenSize()
|
|
|
|
if (isSmallScreen) {
|
|
return (
|
|
<SecondaryPageLink to={toRelaySettings()}>
|
|
<Button variant={variant} size={variant} title={t('Relay settings')}>
|
|
<Server />
|
|
{variant === 'sidebar' && <div>{t('SidebarRelays')}</div>}
|
|
</Button>
|
|
</SecondaryPageLink>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant={variant} size={variant} title={t('Relay settings')}>
|
|
<Server />
|
|
{variant === 'sidebar' && <div>{t('SidebarRelays')}</div>}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
className="w-96 h-[450px] p-0"
|
|
side={variant === 'titlebar' ? 'bottom' : 'right'}
|
|
>
|
|
<ScrollArea className="h-full">
|
|
<div className="p-4">
|
|
<RelaySettings />
|
|
</div>
|
|
</ScrollArea>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|