Extract openapi to separate component

Author: hoijnet

src/app/docs/openapi/openapi.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { useTheme } from 'next-themes'
+import { SwaggerDark } from './SwaggerDark'
+import { SwaggerLight } from './SwaggerLight'
+import { useEffect, useState } from 'react'
+import { useMediaQuery } from 'usehooks-ts'
+
+export default function OpenApiTerminusDB() {
+  return (
+    <article className="w-full max-w-none">
+    <div className="">
+      <h2 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
+        OpenAPI spec
+      </h2>
+      <div className="mt-8 rounded-md bg-slate-50 py-1">
+        <SwaggerLight />
+      </div>
+    </div>
+  </article>
+  )
+}

src/app/docs/openapi/page.tsx

@@ -1,10 +1,6 @@
-'use client'
-import { useTheme } from 'next-themes'
-import { SwaggerDark } from './SwaggerDark'
-import { SwaggerLight } from './SwaggerLight'
-import { useEffect, useState } from 'react'
-import { useMediaQuery } from 'usehooks-ts'
+
 import { Metadata } from 'next'
+import OpenApiTerminusDB from './openapi'
 // const SwaggerUI = dynamic(import('swagger-ui-react'), { ssr: false })
 
 export const metadata: Metadata = {
@@ -20,16 +16,7 @@ export const metadata: Metadata = {
 const OpenApi = () => {
   return (
     <div className="w-full max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
-      <article className="w-full max-w-none">
-        <div className="">
-          <h2 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
-            OpenAPI spec
-          </h2>
-          <div className="mt-8 rounded-md bg-slate-50 py-1">
-            <SwaggerLight />
-          </div>
-        </div>
-      </article>
+      <OpenApiTerminusDB/>
     </div>
   )
 }