<template>
  <component
    :is="currentComponentKeyCode"
    class="config-padding"
  />
</template>

<script>
import { mapState } from 'vuex'
import Search from './Search/index'
import AddComponent from './AddComponent/index'
import Carousel from './Carousel/index'
import Video from './Video/index'
import SingleItem from './SingleItem/index'
import CategoryNavigation from './CategoryNavigation/index'
import Commodity from './Commodity/index'
import Editor from './Editor/index'
import GraphicNavigation from './GraphicNavigation/index'
import ImageBox from './ImageBox/index'
import GroupList from './GroupList/index'
import Footer from './Footer/index'
export default {
  components: {
    Search,
    AddComponent,
    Carousel,
    Video,
    SingleItem,
    CategoryNavigation,
    Commodity,
    Editor,
    GraphicNavigation,
    ImageBox,
    GroupList,
    Footer
  },
  data () {
    return {}
  },
  computed: {
    ...mapState('creationCamp', ['currentComponentKeyCode'])
  }
}
</script>

<style lang="less" scoped>
.config-padding {
  padding: 0 20px 20px;
}
</style>
