[devtools] set up panel ui tab infra

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/devtools-panel-tab.tsx

@@ -0,0 +1,24 @@
+import type { DevToolsPanelTabType } from '../devtools-panel'
+
+export function DevToolsPanelTab({
+  activeTab,
+}: {
+  activeTab: DevToolsPanelTabType
+}) {
+  if (activeTab === 'settings') {
+    return <div>Settings</div>
+  }
+
+  if (activeTab === 'route') {
+    return <div>Route</div>
+  }
+
+  if (activeTab === 'issues') {
+    return <div>Issues</div>
+  }
+
+  console.log(
+    `[Next.js DevTools] Received unknown Panel Tab: "${activeTab}". This is a bug in Next.js DevTools.`
+  )
+  return null
+}

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

@@ -3,6 +3,7 @@ import type { OverlayDispatch, OverlayState } from '../../shared'
 import { useState } from 'react'
 
 import { DevToolsPanelFooter } from './devtools-panel-footer'
+import { DevToolsPanelTab } from './devtools-panel-tab/devtools-panel-tab'
 import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog'
 import { Overlay } from '../overlay/overlay'
 import {
@@ -17,6 +18,8 @@ import { INDICATOR_PADDING } from '../devtools-indicator/devtools-indicator'
 import { FullScreenIcon } from '../../icons/fullscreen'
 import { Cross } from '../../icons/cross'
 
+export type DevToolsPanelTabType = 'issues' | 'route' | 'settings'
+
 export function DevToolsPanel({
   state,
   dispatch,
@@ -115,7 +118,9 @@ export function DevToolsPanel({
                   </div>
                 </div>
               </DialogHeader>
-              <DialogBody></DialogBody>
+              <DialogBody>
+                <DevToolsPanelTab activeTab={activeTab} />
+              </DialogBody>
             </DialogContent>
             <DevToolsPanelFooter versionInfo={state.versionInfo} />
           </Dialog>