Use Shiki in ResponseContainer

polarsource · Jun 20, 2024 · 95d58f5 · 95d58f5
1 parent 8618eaa
commit 95d58f5
Showing 1 changed file with 4 additions and 19 deletions.
diff --git a/clients/apps/web/src/components/Documentation/ResponseContainer.tsx b/clients/apps/web/src/components/Documentation/ResponseContainer.tsx
@@ -1,15 +1,11 @@
-'use client'
-
-import { useTheme } from 'next-themes'
 import { OpenAPIV3_1 } from 'openapi-types'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from 'polarkit/components/ui/atoms/tabs'
-import SyntaxHighlighter from '../SyntaxHighlighter/SyntaxHighlighter'
-import { Theme, polarDark, polarLight } from '../SyntaxHighlighter/themes'
+import SyntaxHighlighterServer from '../SyntaxHighlighterAsync/SyntaxHighlighterServer'
 import { generateSchemaExample } from './openapi'
 
 export const ResponseContainer = ({
@@ -18,16 +14,6 @@ export const ResponseContainer = ({
   responses: OpenAPIV3_1.ResponsesObject
 }) => {
   const triggerClassName = 'py-1'
-  const { resolvedTheme } = useTheme()
-  const baseTheme = resolvedTheme === 'dark' ? polarDark : polarLight
-  const syntaxHighlighterTheme: Theme = {
-    ...baseTheme,
-    base: {
-      ...baseTheme.base,
-      background: 'transparent',
-      maxHeight: '18rem',
-    },
-  }
 
   return (
     <div className="dark:border-polar-700 flex h-full w-full flex-col rounded-3xl bg-white shadow-sm dark:border dark:bg-transparent dark:shadow-none">
@@ -59,13 +45,12 @@ export const ResponseContainer = ({
             <TabsContent
               key={statusCode}
               value={statusCode}
-              className="p-2 py-0 text-xs"
+              className="p-4 text-xs"
             >
               {schema ? (
-                <SyntaxHighlighter
-                  language="json"
+                <SyntaxHighlighterServer
+                  lang="json"
                   code={JSON.stringify(generateSchemaExample(schema), null, 2)}
-                  theme={syntaxHighlighterTheme}
                 />
               ) : undefined}
             </TabsContent>