[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, Corners } 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, OverlayBackdrop } from '../overlay'
 import {
@@ -15,6 +16,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'
+
 function getInitialPosition(): Corners {
   if (
     typeof localStorage !== 'undefined' &&
@@ -123,7 +126,9 @@ export function DevToolsPanel({
                   </div>
                 </div>
               </DialogHeader>
-              <DialogBody></DialogBody>
+              <DialogBody>
+                <DevToolsPanelTab activeTab={activeTab} />
+              </DialogBody>
             </DialogContent>
             <DevToolsPanelFooter versionInfo={state.versionInfo} />
           </Dialog>