DatabaseBackupsNav.tsx54 lines · main
1import Link from 'next/link'
2import { Badge, NavMenu, NavMenuItem } from 'ui'
3
4import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
5import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
6
7type Props = {
8 active: 'pitr' | 'scheduled' | 'rtnp'
9}
10
11function DatabaseBackupsNav({ active }: Props) {
12 const { ref, cloud_provider } = useSelectedProjectQuery()?.data || {}
13 const { databaseRestoreToNewProject } = useIsFeatureEnabled(['database:restore_to_new_project'])
14
15 const navMenuItems = [
16 {
17 enabled: true,
18 id: 'scheduled',
19 label: 'Scheduled backups',
20 href: `/project/${ref}/database/backups/scheduled`,
21 },
22 {
23 enabled: true,
24 id: 'pitr',
25 label: 'Point in time',
26 href: `/project/${ref}/database/backups/pitr`,
27 },
28 {
29 enabled: databaseRestoreToNewProject && cloud_provider !== 'FLY',
30 id: 'rtnp',
31 label: (
32 <div className="flex items-center gap-2">
33 Restore to new project <Badge variant="warning">Beta</Badge>
34 </div>
35 ),
36 href: `/project/${ref}/database/backups/restore-to-new-project`,
37 },
38 ] as const
39
40 return (
41 <NavMenu className="overflow-hidden overflow-x-auto">
42 {navMenuItems.map(
43 (item) =>
44 item.enabled && (
45 <NavMenuItem key={item.id} active={item.id === active}>
46 <Link href={item.href}>{item.label}</Link>
47 </NavMenuItem>
48 )
49 )}
50 </NavMenu>
51 )
52}
53
54export default DatabaseBackupsNav