chore: use new nav in database backups page (#20552)

use new nav in database backups page

apps/studio/components/interfaces/Database/Backups/DatabaseBackupsNav.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link'
+import React from 'react'
+import { NavMenu, NavMenuItem } from 'ui'
+
+type Props = {
+  projRef: string
+  active: 'scheduled' | 'pitr'
+}
+
+function DatabaseBackupsNav({ projRef, active }: Props) {
+  const navMenuItems = [
+    {
+      id: 'scheduled',
+      label: 'Scheduled backups',
+      href: `/project/${projRef}/database/backups/scheduled`,
+    },
+    {
+      id: 'pitr',
+      label: 'Point in time',
+      href: `/project/${projRef}/database/backups/pitr`,
+    },
+  ]
+
+  return (
+    <NavMenu>
+      {navMenuItems.map((item) => (
+        <NavMenuItem key={item.label} active={item.id === active}>
+          <Link href={item.href}>{item.label}</Link>
+        </NavMenuItem>
+      ))}
+    </NavMenu>
+  )
+}
+
+export default DatabaseBackupsNav

apps/studio/pages/project/[ref]/database/backups/pitr.tsx

@@ -1,6 +1,4 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useRouter } from 'next/router'
-
 import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
 import { DatabaseLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
@@ -13,10 +11,9 @@ import { useBackupsQuery } from 'data/database/backups-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useCheckPermissions, usePermissionsLoaded, useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
-import { Tabs } from 'ui'
+import DatabaseBackupsNav from 'components/interfaces/Database/Backups/DatabaseBackupsNav'
 
 const DatabasePhysicalBackups: NextPageWithLayout = () => {
-  const router = useRouter()
   const { project } = useProjectContext()
   const ref = project?.ref ?? 'default'
 
@@ -26,19 +23,7 @@ const DatabasePhysicalBackups: NextPageWithLayout = () => {
         <div className="col-span-12">
           <div className="space-y-6">
             <h3 className="text-xl text-foreground">Database Backups</h3>
-
-            <Tabs
-              type="underlined"
-              size="small"
-              activeId="pitr"
-              onChange={(id: any) => {
-                if (id === 'scheduled') router.push(`/project/${ref}/database/backups/scheduled`)
-              }}
-            >
-              <Tabs.Panel id="scheduled" label="Scheduled backups" />
-              <Tabs.Panel id="pitr" label="Point in Time" />
-            </Tabs>
-
+            <DatabaseBackupsNav active="pitr" projRef={ref} />
             <div className="space-y-8">
               <PITR />
             </div>

apps/studio/pages/project/[ref]/database/backups/scheduled.tsx

@@ -13,11 +13,11 @@ import { useBackupsQuery } from 'data/database/backups-query'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
 import { NextPageWithLayout } from 'types'
 import { IconInfo, Tabs } from 'ui'
+import DatabaseBackupsNav from 'components/interfaces/Database/Backups/DatabaseBackupsNav'
 
 const DatabaseScheduledBackups: NextPageWithLayout = () => {
-  const router = useRouter()
   const { project } = useProjectContext()
-  const ref = project?.ref
+  const ref = project?.ref || 'default'
 
   const {
     data: backups,
@@ -38,19 +38,8 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
           <div className="space-y-6">
             <h3 className="text-xl text-foreground">Database Backups</h3>
 
-            <Tabs
-              type="underlined"
-              size="small"
-              activeId="scheduled"
-              onChange={(id: any) => {
-                if (id === 'pitr') router.push(`/project/${ref}/database/backups/pitr`)
-              }}
-            >
-              <Tabs.Panel id="scheduled" label="Scheduled backups" />
-              <Tabs.Panel id="pitr" label="Point in Time" />
-            </Tabs>
-
-            <div className="space-y-4">
+            <DatabaseBackupsNav active="scheduled" projRef={ref} />
+            <div className="space-y-8">
               {isLoading && <GenericSkeletonLoader />}
 
               {isError && (