added Dart to the api preview examples

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

@@ -2,16 +2,18 @@
     import { Collection } from "pocketbase";
     import ApiClient from "@/utils/ApiClient";
     import CodeBlock from "@/components/base/CodeBlock.svelte";
+    import SdkTabs from "@/components/collections/docs/SdkTabs.svelte";
 
     export let collection = new Collection();
 
     let responseTab = 204;
-    let sdkTab = "JavaScript";
     let responses = [];
-    let sdkExamples = [];
 
     $: adminsOnly = collection?.deleteRule === null;
 
+    $: backendAbsUrl =
+        window.location.href.substring(0, window.location.href.indexOf("/_")) || ApiClient.baseUrl;
+
     $: if (collection?.id) {
         responses.push({
             code: 204,
@@ -55,21 +57,6 @@
             `,
         });
     }
-
-    $: sdkExamples = [
-        {
-            lang: "JavaScript",
-            code: `
-                import PocketBase from 'pocketbase';
-
-                const client = new PocketBase("${ApiClient.baseUrl}");
-
-                ...
-
-                await client.Records.delete("${collection?.name}", "RECORD_ID");
-            `,
-        },
-    ];
 </script>
 
 <div class="alert alert-danger">
@@ -89,26 +76,26 @@
 </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}');
+
+        ...
+
+        await client.Records.delete('${collection?.name}', 'RECORD_ID');
+    `}
+    dart={`
+        import 'package:pocketbase/pocketbase.dart';
+
+        final client = PocketBase('${backendAbsUrl}');
+
+        ...
+
+        await client.records.delete('${collection?.name}', 'RECORD_ID');
+    `}
+/>
 
 <div class="section-title">Path parameters</div>
 <table class="table-compact table-border m-b-lg">