feat: create code switcher tab (#8)

# What 💻 
* Create a component that tabs content for display
* Create a component that displays partial markdown files for re-use
across documents

# Why ✋
* Breaks down complex instructions that will be hidden in tabs into
partials for easier editing.
* Makes it easier to re-use content versus re-writing content.

# Evidence 📷
![Screenshot 2024-03-27 at 3 21
48 PM](https://github.com/matter-labs/zksync-docs/assets/812331/2ff1eb91-fa1f-4231-82de-51f61dd51702)

Example set up in the Getting Started page to show how it can be used.
NuxtUI has a UTabs component that can be used plainly if we didn't want
to use this. This new component provides a way to have tabbed content
that can be loaded from partial markdown files to help split up content
and make editing potentially easier.

A future feature to implement in this component would be to have a way
to track which tab is actively selected and update similar tabs to the
same selected tab. Also store this selected tab in localStorage
potentially so that the preferred tab for the user is always selected
across the site.

components/content/ContentSwitcher.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  items: ContentSwitcherItem[];
+}>();
+
+const selectedIndex = ref(0);
+
+function onTabChange(index: number) {
+  selectedIndex.value = index;
+}
+const route = useRoute();
+</script>
+
+<template>
+  <div>
+    <UTabs
+      :items="items"
+      :ui="{ list: { width: 'w-auto' } }"
+      @change="onTabChange"
+    />
+    <div
+      v-for="(item, index) in items"
+      v-show="selectedIndex === index"
+      :key="item.partial"
+    >
+      <ContentQuery
+        v-slot="{ data }"
+        :path="$route.path"
+        find="one"
+        :where="{ _partial: true, _path: { $icontains: item.partial } }"
+      >
+        <ContentRenderer :value="data" />
+      </ContentQuery>
+    </div>
+    <UDivider />
+  </div>
+</template>

components/content/DisplayPartial.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  partial: string;
+}>();
+</script>
+
+<template>
+  <ContentQuery
+    v-slot="{ data }"
+    path="_partials"
+    find="one"
+    :where="{ _partial: true, title: { $icontains: partial } }"
+  >
+    <ContentRenderer :value="data" />
+  </ContentQuery>
+</template>

content/10.getting-started/1.index.md

@@ -8,6 +8,18 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h
 premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in
 minutes.
 
+::content-switcher
+---
+items: [{
+  label: 'HardHat',
+  partial: '_getting-started/_aPartial'
+}, {
+  label: 'Forge',
+  partial: '_getting-started/_anotherpartial'
+}]
+---
+::
+
 There are already many websites based on this template:
 
 - [Nuxt](https://nuxt.com) - The Nuxt website
@@ -17,6 +29,12 @@ There are already many websites based on this template:
 - [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
 - [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content
 
+::display-partial
+---
+partial: 'Setting up your wallet'
+---
+::
+
 ## Features
 
 - Powered by [Nuxt 3](https://nuxt.com)

content/10.getting-started/_getting-started/_aPartial.md

@@ -0,0 +1,5 @@
+---
+title: A Partial
+---
+
+This is a partial that's coming from somewhere else!

content/10.getting-started/_getting-started/_anotherPartial.md

@@ -0,0 +1,5 @@
+---
+title: Another Partial
+---
+
+This is the second partial

content/_partials/setting-up-your-wallet.md

@@ -0,0 +1,9 @@
+---
+title: Setting up your wallet
+---
+
+Here's how to setup your wallet, follow the instructions below:
+
+1. Download wallet
+2. ???
+3. Profit

types/CodeSwitcher.d.ts

@@ -0,0 +1,14 @@
+declare interface ContentSwitcherItem {
+  /**
+   * The label to display on the tab
+   */
+  label: string;
+  /**
+   * The general path to the partial that is relative to the parent markdown.
+   *
+   * Example:
+   *
+   * "_getting-started/_aPartial" => `_getting-started/_aPartial.md`
+   */
+  partial: string;
+}