move docs to own folder

docs/src/components/Demo/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="demo">
+    <div class="demo__preview" v-if="mainFile">
+      <component :is="mainFile" v-if="mode === 'vue'" />
+      <react-renderer :component="mainFile" v-if="mode === 'react'" />
+    </div>
+    <div class="demo__source">
+      <div class="demo__tabs" v-if="showFileNames">
+        <button
+          class="demo__tab"
+          :class="{ 'is-active': currentIndex === index}"
+          v-for="(file, index) in files"
+          :key="index"
+          @click="currentIndex = index"
+        >
+          {{ file.name }}
+        </button>
+      </div>
+      <div class="demo__code" v-if="activeFile">
+        <pre :class="`language-${activeFile.highlight}`"><code :class="`language-${activeFile.highlight}`" v-html="$options.filters.highlight(activeFile.content, activeFile.highlight)"></code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ReactRenderer from '~/components/ReactRenderer'
+
+export default {
+  components: {
+    ReactRenderer,
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    mode: {
+      type: String,
+      default: 'vue',
+    },
+  },
+
+  data() {
+    return {
+      files: [],
+      content: null,
+      currentIndex: 0,
+      syntax: {
+        js: 'javascript',
+        jsx: 'jsx',
+        vue: 'markup',
+        css: 'css',
+      },
+    }
+  },
+
+  computed: {
+    mainFile() {
+      const file = this.files
+        .find(item => item.path.endsWith('.vue') || item.path.endsWith('.jsx'))
+
+      if (!file) {
+        return
+      }
+
+      return require(`~/demos/${file.path}`).default
+    },
+
+    showFileNames() {
+      return this.files.length > 1
+    },
+
+    activeFile() {
+      return this.files[this.currentIndex]
+    },
+  },
+
+  mounted() {
+    this.files = require.context(`~/demos/`, true, /.+\..+$/)
+      .keys()
+      .filter(path => path.startsWith(`./${this.name}`))
+      .map(path => path.replace('./', ''))
+      .map(path => ({
+        path,
+        name: path.replace(`${this.name}/`, ''),
+        content: require(`!!raw-loader!~/demos/${path}`).default,
+        extension: path.split('.').pop(),
+        highlight: this.syntax[path.split('.').pop()] || 'markup',
+      }))
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss" scoped />

docs/src/components/Demo/style.scss

@@ -0,0 +1,64 @@
+.demo {
+  background-color: $colorWhite;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow:
+    0px 6.6501px 5.32008px rgba($colorBlack, 0.0161557),
+    0px 22.3363px 17.869px rgba($colorBlack, 0.0238443),
+    0px 100px 80px rgba($colorBlack, 0.04),
+    0 0 0 1px rgba($colorBlack, 0.05),
+  ;
+  
+  &__preview {
+    padding: 1.5rem;
+  }
+  
+  &__source {
+    background-color: $colorLightGrey;
+  }
+
+  &__tabs {
+    padding: 0 1.5rem;
+    border-bottom: 1px solid rgba($colorBlack, 0.05);
+  }
+
+  &__tab {
+    position: relative;
+    color: rgba($colorBlack, 0.5);
+    font: inherit;
+    font-weight: 500;
+    padding: 0.75rem 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-right: 1rem;
+
+    &.is-active {
+      color: $colorBlack;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: $colorBlack;
+      }
+    } 
+  }
+  
+  &__code {
+    padding: 0.75rem 1.5rem;
+
+    code, pre {
+      padding: 0;
+    }
+  
+    [class*="language-"] {
+      background: none;
+      border: none;
+      box-shadow: none;
+    }
+  }
+}