From 7d84c33b1df110449657cdca5a239559a9884eea Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 1 Jul 2026 12:33:28 +0200
Subject: [PATCH] revert migration in `SqlToRest` and use renamed `DocsTabs`

---
 .../ui-patterns/src/SqlToRest/sql-to-rest.tsx | 56 +++----------------
 1 file changed, 9 insertions(+), 47 deletions(-)

diff --git a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx b/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
index 587ef817374..be88d53e064 100644
--- a/packages/ui-patterns/src/SqlToRest/sql-to-rest.tsx
+++ b/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}
-  />
-)