add tabs to demos

docs/src/components/Demo/index.vue

@@ -5,7 +5,8 @@
       <template v-if="mainFile">
         <demo-frame class="demo__preview" v-bind="props" />
         <div class="demo__source" v-if="showSource">
-          <div class="demo__tabs" v-if="showFileNames">
+          <div class="demo__scroller" v-if="showFileNames">
+            <div class="demo__tabs">
               <button
                 class="demo__tab"
                 :class="{ 'is-active': currentIndex === index}"
@@ -16,6 +17,7 @@
                 {{ file.name }}
               </button>
             </div>
+          </div>
           <div class="demo__code" v-if="activeFile" :key="activeFile.path">
             <!-- eslint-disable-next-line -->
             <prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>

docs/src/components/Demo/style.scss

@@ -18,33 +18,42 @@
     background-color: $colorBlack;
   }
 
-  &__tabs {
-    padding: 0.5rem 1.25rem 0 1.25rem;
-    background-color: rgba($colorBlack, 0.9);
-    white-space: nowrap;
+  &__scroller {
+    display: flex;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
 
+  &__tabs {
+    display: flex;
+    flex: 1 1 auto;
+    padding: 0 1.25rem 0 1.25rem;
+    border-bottom: 2px solid rgba($colorWhite, 0.1);
+  }
+
   &__tab {
+    position: relative;
     display: inline-flex;
     position: relative;
     background-color: transparent;
     color: rgba($colorWhite, 0.7);
-    padding: 0.1rem 0.5rem;
-    border-radius: 5px;
-    font-weight: 500;
+    padding: 0.3rem 0 calc(0.3rem + 2px) 0;
+    font: inherit;
+    font-family: "JetBrainsMono", monospace;
+    font-size: 0.85rem;
     border: none;
-    margin-right: 0.5rem;
-
-    &:first-child {
-      margin-left: -0.5rem;
-    }
+    margin-right: 1rem;
+    margin-bottom: -2px;
+    border-bottom: 2px solid transparent;
 
     &.is-active,
     &:hover {
       color: $colorWhite;
-      background-color: rgba($colorWhite, 0.1);
+    }
+
+    &.is-active {
+      font-weight: 700;
+      border-bottom-color: $colorWhite
     }
   }
 

docs/src/components/Demos/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="demos" :class="{ 'is-first-active': selectedIndex === 0 }">
+    <button
+      class="demos__tab"
+      :class="{ 'is-active': selectedIndex === index }"
+      v-for="(item, index) in formattedItems"
+      :key="index"
+      @click="selectedIndex = index"
+    >
+      {{ item.title }}
+    </button>
+    <demo
+      :name="selectedItem.name"
+      :key="selectedItem.title"
+    />
+  </div>
+</template>
+
+<script>
+import Demo from '@/components/Demo'
+
+export default {
+  components: {
+    Demo,
+  },
+
+  props: {
+    items: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+
+  computed: {
+    formattedItems() {
+      return Object
+        .entries(this.items)
+        .map(([title, name]) => {
+          return {
+            title,
+            name,
+          }
+        })
+    },
+
+    selectedItem() {
+      return this.formattedItems[this.selectedIndex]
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.demos {
+  &__tab {
+    border-radius: 0.4rem 0.4rem 0 0;
+    border: none;
+    background: none;
+    padding: 0.3rem 1.25rem;
+    font: inherit;
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.025rem;
+
+    &.is-active {
+      background-color: $colorBlack;
+      color: $colorWhite;
+      font-weight: 700;
+    }
+  }
+
+  &.is-first-active ::v-deep .demo {
+    border-top-left-radius: 0;
+  }
+}
+</style>

docs/src/docPages/examples/community.md

@@ -1,7 +1,6 @@
 # Suggestions
 
-## Vue
-<demo name="Examples/Community/Vue" />
-
-## React
-<demo name="Examples/Community/React" />
+<demos :items="{
+  Vue: 'Examples/Community/Vue',
+  React: 'Examples/Community/React',
+}" />

docs/src/docPages/examples/default.md

@@ -1,8 +1,7 @@
 # Default text editor
 Did we mention that you have full control over the rendering of the editor? Here is barebones example without any styling, but packed with a whole set of common extensions.
 
-## Vue
-<demo name="Examples/Default/Vue" />
-
-## React
-<demo name="Examples/Default/React" />
+<demos :items="{
+  Vue: 'Examples/Default/Vue',
+  React: 'Examples/Default/React',
+}" />

docs/src/main.js

@@ -51,4 +51,5 @@ export default function (Vue) {
 
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
+  Vue.component('Demos', () => import(/* webpackChunkName: "demos" */ '~/components/Demos'))
 }