[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

@@ -26,6 +26,9 @@ function getInitialPosition(): Corners {
 import { FullScreenIcon } from '../../icons/fullscreen'
 import { Cross } from '../../icons/cross'
 import { DevToolsPanelFooter } from './devtools-panel-footer'
+import { DevToolsPanelTab } from './devtools-panel-tab/devtools-panel-tab'
+
+export type DevToolsPanelTabType = 'issues' | 'route' | 'settings'
 
 export function DevToolsPanel({
   state,
@@ -134,7 +137,9 @@ export function DevToolsPanel({
                   </div>
                 </div>
               </DialogHeader>
-              <DialogBody></DialogBody>
+              <DialogBody>
+                <DevToolsPanelTab activeTab={activeTab} />
+              </DialogBody>
             </DialogContent>
           </Dialog>
           <DevToolsPanelFooter versionInfo={state.versionInfo} />