Refactoring folders

src/App.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Header from "./views/Header";
+import Header from "./components/Header";
 import MasterComponent from "./components/Master";
 
 export default {

src/components/CodeSnippet.vue

@@ -1,34 +0,0 @@
-<template>
-   <div class="relative rounded overflow-hidden">
-        <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden">{{ code }}</code></pre>
-        <div class="absolute right-0 top-0">
-            <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:copy="code">
-                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
-                    <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
-                </svg>
-            </button>
-        </div>
-    </div>
-</template>
-
-<script>
-import hljs from 'highlight.js/lib/core';
-hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
-import 'highlight.js/styles/atom-one-dark.css';
-
-export default {
-    props: ['code'],
-     mounted() {
-        this.highlightCode();
-    },
-    methods: {
-        highlightCode() {
-            this.$nextTick(() => {
-                document.querySelectorAll('pre code').forEach((block) => {
-                    hljs.highlightBlock(block);
-                });
-            });
-        },
-    }
-}
-</script>

src/components/Master.vue

@@ -13,7 +13,9 @@
                     <div class="mt-2 md:mt-0">
                         <button @click="searchText = ''"
                                 class="ml-1 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
-                           :class="searchText.length === 0 ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">all</button>
+                                :class="searchText.length === 0 ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">
+                            all
+                        </button>
                         <span v-for="category in categories" :key="category.name">
                             <button @click="searchText = category.name"
                                     class="ml-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"

src/components/UI/Alert/NotificationPop.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../../views/ViewComponent";
+import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/UI/Cards/Article.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/UI/Cards/Product.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/UI/Cards/ProductWithEvaluation.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/UI/Cards/Testimonial.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/UI/Cards/UserDetails.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/UI/Forms/Login.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../../views/ViewComponent";
+import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/UI/Forms/Subscribe.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../../views/ViewComponent";
+import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {

src/components/Utilities/CodeSnippet.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="relative rounded overflow-hidden">
+        <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden">{{ code }}</code></pre>
+        <div class="absolute right-0 top-0">
+            <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:copy="code">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                     viewBox="0 0 24 24" class="w-6 h-6">
+                    <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import hljs from 'highlight.js/lib/core';
+
+    hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
+    import 'highlight.js/styles/atom-one-dark.css';
+
+    export default {
+        props: ['code'],
+        mounted() {
+            this.highlightCode();
+        },
+        methods: {
+            highlightCode() {
+                this.$nextTick(() => {
+                    document.querySelectorAll('pre code').forEach((block) => {
+                        hljs.highlightBlock(block);
+                    });
+                });
+            },
+        }
+    }
+</script>

src/components/Utilities/ViewComponent.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import CodeSnippet from "../components/CodeSnippet";
+import CodeSnippet from "./CodeSnippet";
 
 export default {
     props: ['name' , 'code'],