revert migration in SqlToRest and use renamed DocsTabs

packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx

@@ -28,19 +28,7 @@ import {
 } from 'react'
 import Markdown from 'react-markdown'
 import { format } from 'sql-formatter'
-import {
-  Alert,
-  Button,
-  ButtonProps,
-  cn,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Tabs_Shadcn_ as Tabs,
-  TabsContent_Shadcn_ as TabsContent,
-  TabsList_Shadcn_ as TabsList,
-  TabsTrigger_Shadcn_ as TabsTrigger,
-} from 'ui'
+import { Alert, cn, Collapsible, CollapsibleContent, CollapsibleTrigger, DocsTabs } from 'ui'
 import { CodeBlock } from 'ui-patterns/CodeBlock'
 
 import { assumptions } from './assumptions'
@@ -367,23 +355,8 @@ export default function SqlToRest({
         )}
       >
         <div className="font-medium">Choose language to translate to</div>
-        <Tabs
-          value={currentLanguage}
-          onValueChange={(id: string) => setCurrentLanguage(id)}
-          className="mb-4"
-        >
-          <TabsList className="w-full gap-1 border-0">
-            <TabsTrigger value="curl" asChild>
-              <TabsButton active={currentLanguage === 'curl'}>cURL</TabsButton>
-            </TabsTrigger>
-            <TabsTrigger value="http" asChild>
-              <TabsButton active={currentLanguage === 'http'}>HTTP</TabsButton>
-            </TabsTrigger>
-            <TabsTrigger value="js" asChild>
-              <TabsButton active={currentLanguage === 'js'}>JavaScript</TabsButton>
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent value="curl" className="flex flex-col gap-4">
+        <DocsTabs.Tabs activeId={currentLanguage} onChange={(id: string) => setCurrentLanguage(id)}>
+          <DocsTabs.Tabs.Panel id="curl" label="cURL" className="flex flex-col gap-4">
             {httpRenderError && <Alert className="text-red-900">{httpRenderError.message}</Alert>}
             <CodeBlock
               language="curl"
@@ -396,8 +369,8 @@ export default function SqlToRest({
             >
               {curlCommand}
             </CodeBlock>
-          </TabsContent>
-          <TabsContent value="http" className="flex flex-col gap-4">
+          </DocsTabs.Tabs.Panel>
+          <DocsTabs.Tabs.Panel id="http" label="HTTP" className="flex flex-col gap-4">
             {httpRenderError && <Alert className="text-red-900">{httpRenderError.message}</Alert>}
             <CodeBlock
               language="http"
@@ -410,8 +383,8 @@ export default function SqlToRest({
             >
               {rawHttp}
             </CodeBlock>
-          </TabsContent>
-          <TabsContent value="js" className="flex flex-col gap-4">
+          </DocsTabs.Tabs.Panel>
+          <DocsTabs.Tabs.Panel id="js" label="JavaScript" className="flex flex-col gap-4">
             {supabaseJsRenderError && (
               <Alert className="text-red-900">{supabaseJsRenderError.message}</Alert>
             )}
@@ -426,8 +399,8 @@ export default function SqlToRest({
             >
               {jsCommand}
             </CodeBlock>
-          </TabsContent>
-        </Tabs>
+          </DocsTabs.Tabs.Panel>
+        </DocsTabs.Tabs>
         <div
           className={cn(
             'flex flex-col gap-4',
@@ -512,14 +485,3 @@ function getTheme(isDarkMode: boolean): editor.IStandaloneThemeData {
     colors: { 'editor.background': isDarkMode ? '#1f1f1f' : '#f0f0f0' },
   }
 }
-
-const TabsButton = ({ active, className, ...props }: { active: boolean } & ButtonProps) => (
-  <Button
-    size="tiny"
-    variant={active ? 'default' : 'outline'}
-    className={cn({
-      'text-muted hover:text-foreground': !active,
-    })}
-    {...props}
-  />
-)