added Dart to the api preview examples

ui/src/components/collections/docs/ViewApiDocs.svelte

@@ -3,16 +3,18 @@
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
     import CodeBlock from "@/components/base/CodeBlock.svelte";
+    import SdkTabs from "@/components/collections/docs/SdkTabs.svelte";
 
     export let collection = new Collection();
 
     let responseTab = 200;
-    let sdkTab = "JavaScript";
     let responses = [];
-    let sdkExamples = [];
 
     $: adminsOnly = collection?.viewRule === null;
 
+    $: backendAbsUrl =
+        window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
+
     $: if (collection?.id) {
         responses.push({
             code: 200,
@@ -43,23 +45,6 @@
             `,
         });
     }
-
-    $: sdkExamples = [
-        {
-            lang: "JavaScript",
-            code: `
-                import PocketBase from 'pocketbase';
-
-                const client = new PocketBase("${ApiClient.baseUrl}");
-
-                ...
-
-                const record = await client.Records.getOne("${collection?.name}", "RECORD_ID", {
-                    expand: "some_relation"
-                });
-            `,
-        },
-    ];
 </script>
 
 <div class="alert alert-info">
@@ -79,26 +64,30 @@
 </div>
 
 <div class="section-title">Client SDKs example</div>
-<div class="tabs m-b-lg">
-    <div class="tabs-header compact left">
-        {#each sdkExamples as example (example.lang)}
-            <button
-                class="tab-item"
-                class:active={sdkTab === example.lang}
-                on:click={() => (sdkTab = example.lang)}
-            >
-                {example.lang}
-            </button>
-        {/each}
-    </div>
-    <div class="tabs-content">
-        {#each sdkExamples as example (example.lang)}
-            <div class="tab-item" class:active={sdkTab === example.lang}>
-                <CodeBlock content={example.code} />
-            </div>
-        {/each}
-    </div>
-</div>
+<SdkTabs
+    js={`
+        import PocketBase from 'pocketbase';
+
+        const client = new PocketBase('${backendAbsUrl}');
+
+        ...
+
+        const record = await client.Records.getOne('${collection?.name}', 'RECORD_ID', {
+            expand: 'some_relation'
+        });
+    `}
+    dart={`
+        import 'package:pocketbase/pocketbase.dart';
+
+        final client = PocketBase('${backendAbsUrl}');
+
+        ...
+
+        final record = await client.records.getOne('${collection?.name}', 'RECORD_ID', query: {
+          'expand': 'some_relation',
+        });
+    `}
+/>
 
 <div class="section-title">Path Parameters</div>
 <table class="table-compact table-border m-b-lg">