feat: refactoring and added content to the kitchen sink page

astro.config.mjs

@@ -36,7 +36,7 @@ export default defineConfig({
         "@components/Abbr.astro",
         "@components/Badge.astro",
         "@components/Tooltip.astro",
-        "@components/VersionSwitch/Version.astro",
+        "@components/Version.astro",
         "@components/FigmaEmbed/FigmaEmbed.astro",
       ],
     }),

src/components/Layout/PageContent/PageContent.astro

@@ -5,7 +5,7 @@ import classNames from "classnames";
 import RightSidebar from "../RightSidebar/RightSidebar.astro";
 import type { NavigationData } from "@utils/helpers/navigation/types";
 import CategoryCard from "@components/Cards/CategoryCard.astro";
-import VersionSwitch from "@components/VersionSwitch/VersionSwitch";
+import VersionSwitch from "@components/Version/VersionSwitch";
 
 import "./article.css";
 
@@ -26,11 +26,11 @@ const { title, headings, childLinks } = Astro.props;
     <aside title="Table of Contents">
       <RightSidebar headings={headings} title={title} />
     </aside>
-    <VersionSwitch client:only="react" />
     <div
-      class={classNames({ "article-content": !childLinks.length })}
-      id="article-content"
+    class={classNames({ "article-content": !childLinks.length })}
+    id="article-content"
     >
+      <VersionSwitch client:only="react" />
       <slot />
       <!-- Category cards for the entry with "category" type and childs -->
       {

src/components/VersionSwitch/Version.astro → src/components/Version.astro

@@ -1,5 +1,5 @@
 ---
-import VersionComponent from "./VersionComponent";
+import VersionComponent from "./Version/VersionComponent";
 
 const {version} = Astro.props;
 let content = "";

src/components/Version/VersionSwitch.tsx

@@ -0,0 +1,27 @@
+import type { FC } from "react";
+import { ComboBox } from "@adjust/components";
+import { useStore } from "@nanostores/react";
+
+import { $versions, changeVersionValue } from "@store/versionsStore";
+
+const VersionSwitch: FC = () => {
+  const versions = useStore($versions);
+
+  if (versions.items.length < 1) {
+    // we don`t need to display the version switch when we have only one or less options
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col w-full min-h-90px justify-start gap-y-8 bg-slate-100 p-6 rounded-lg mb-14 md:flex-row md:items-center md:gap-x-8">
+      <label>Select your SDK version:</label>
+      <ComboBox
+        value={versions.currentVersion}
+        options={versions.items}
+        onChange={changeVersionValue}
+      />
+    </div>
+  );
+};
+
+export default VersionSwitch;

src/content/docs/en/kitchen-sink/version-switch.mdx

@@ -4,19 +4,17 @@ description: "Reference for the version switch component"
 slug: en/kitchen-sink/version-switch
 ---
 
-Use tabs to group information together and enable readers to switch between the content the want to see.
+Use the Version component to group information depending on the version of the SDK.
 
 ## Props
 
 Use props to control the behavior of tabs
 
 <Table>
 
-| Prop    | Data type | Required | Description                                                                                                                                             |
-| ------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title` | String    | Yes      | The title of the tab                                                                                                                                    |
-| `icon`  | IconName  | No       | An optional icon that appears on the left of the panel. See [the list of icons in ATLAS](https://atlas.adeven.com/docs/components/Icon#available-icons) |
-| `sync`  | String    | No       | The sync ID of the tab. Add the same `sync` ID to all tabs you want to synchronize.                                                                     |
+| Prop      | Data type | Required | Description                                                             |
+| --------- | --------- | -------- | ----------------------------------------------------------------------- |
+| `version` | String    | Yes      | A version of the SDK in which we should display content from this block |
 
 </Table>