Create Components & ComponentsFilter

src/App.vue

@@ -1,35 +1,7 @@
 <template>
     <div class="bg-white font-roboto" id="app">
-        <main-header></main-header>
+        <header-component></header-component>
-
+        <main-component></main-component>
-        <main class="container mx-auto px-6" id="main">
-            <div class="mt-16 text-center">
-                <h1 class="text-xl md:text-3xl text-gray-800 font-medium">
-                    Discover new components. Build amazing things 🔥
-                </h1>
-            </div>
-
-            <div class="max-w-2xl mx-auto mt-4">
-                <!-- <div class="flex flex-wrap items-center justify-center">
-                    <span class="ml-2" v-for="route in routes" :key="route.path">
-                        <span v-if="route.path != '/'">
-                            <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
-                                {{ route.name }}
-                            </router-link>
-                        </span>
-                    </span>
-                </div> -->
-
-                <p class="mt-8 text-gray-700 text-center">
-                    Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span>
-                    <a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline"> configuration</a>
-                </p>
-            </div>
-
-            <div class="mt-16">
-                <error-full-width></error-full-width>
-            </div>
-        </main>
 
         <back-to-top visibleoffset="800">
             <button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
@@ -42,18 +14,12 @@
 </template>
 
 <script>
-import MainHeader from "./components/Header";
+import HeaderComponent from "./components/Header";
+import MainComponent from "./components/Main";
 import BackToTop from "vue-backtotop";
 
-import ErrorFullWidth from "./components/ui/Alerts/ErrorFullWidth";
-
 export default {
-    components: {
+    components: { HeaderComponent, MainComponent, BackToTop },
-        MainHeader,
-        BackToTop,
-
-        ErrorFullWidth
-    },
 
     data() {
         return {

src/components/Main.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="container mx-auto px-6 pb-12">
+        <div class="py-16 text-center">
+            <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
+            <div class="max-w-2xl mx-auto">
+                <div class="flex items-center justify-center mt-5 ">
+                    <div class="mt-2 md:mt-0">
+                        <span v-for="category in categories" :key="category.name">
+                            <button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
+                        </span> 
+                    </div>
+                </div>
+            </div>
+
+            <p class="mt-8 text-gray-700 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline"> configuration</a></p>
+        </div>
+
+        <div class="w-full max-w-5xl mx-auto">
+            <div class="mb-16" v-for="category in list" :key="category.name">
+                <h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
+
+                <div v-for="component in category.components" :key="component.name" :name="component.name">
+                    <component :is="category.name + component.name"></component>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// Alerts
+import AlertsSuccessPop from "./ui/Alerts/SuccessPop";
+import AlertsInfoPop from "./ui/Alerts/InfoPop";
+import AlertsWarningPop from "./ui/Alerts/WarningPop";
+import AlertsErrorPop from "./ui/Alerts/ErrorPop";
+import AlertsNotificationPop from "./ui/Alerts/NotificationPop";
+import AlertsSuccessFullWidth from "./ui/Alerts/SuccessFullWidth";
+import AlertsInfoFullWidth from "./ui/Alerts/InfoFullWidth";
+import AlertsWarningFullWidth from "./ui/Alerts/WarningFullWidth";
+import AlertsErrorFullWidth from "./ui/Alerts/ErrorFullWidth";
+// Authentication
+import AuthenticationSimpleLogin from "./ui/Authentication/SimpleLogin";
+import AuthenticationLoginWithSideImage from "./ui/Authentication/LoginWithSideImage";
+// Cards
+import CardsArticle from "./ui/Cards/Article";
+import CardsArticleWithImage from "./ui/Cards/ArticleWithImage";
+import CardsArticleWithSMIcons from "./ui/Cards/ArticleWithSMIcons";
+import CardsProduct from "./ui/Cards/Product";
+import CardsProductWithEvaluation from "./ui/Cards/ProductWithEvaluation";
+import CardsSimpleProduct from "./ui/Cards/SimpleProduct";
+import CardsTestimonial from "./ui/Cards/Testimonial";
+import CardsUser from "./ui/Cards/User";
+import CardsUserWithDetails from "./ui/Cards/UserWithDetails";
+// Forms
+import FormsNewsletter from "./ui/Forms/Newsletter";
+import FormsSimple from "./ui/Forms/Simple";
+// Navbars
+import NavbarsECommerce from "./ui/Navbars/ECommerce";
+import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
+import NavbarsWithSearch from "./ui/Navbars/WithSearch";
+// Heros
+import HerosECommerce from "./ui/Heros/ECommerce";
+import HerosWithImage from "./ui/Heros/WithImage";
+import HerosWithPattern from "./ui/Heros/WithPattern";
+// Sections
+import SectionsAboutMe from "./ui/Sections/AboutMe";
+import SectionsFeature from "./ui/Sections/Feature";
+import SectionsOurTeam from "./ui/Sections/OurTeam";
+import SectionsParagraphWithImage from "./ui/Sections/ParagraphWithImage";
+// paginations
+import PaginationsSimple from "./ui/Paginations/Simple";
+// Footers
+import FootersSimple from "./ui/Footers/Simple";
+import FootersWithDetails from "./ui/Footers/WithDetails";
+import FootersWithSubscribeForm from "./ui/Footers/WithSubscribeForm";
+
+
+
+
+
+import Component from "../models/ComponentsFilter";
+
+export default {
+    components: {
+        AlertsSuccessPop,
+        AlertsInfoPop,
+        AlertsWarningPop,
+        AlertsErrorPop,
+        AlertsNotificationPop,
+        AlertsSuccessFullWidth,
+        AlertsInfoFullWidth,
+        AlertsWarningFullWidth,
+        AlertsErrorFullWidth,
+        AuthenticationSimpleLogin,
+        AuthenticationLoginWithSideImage,
+        CardsArticle,
+        CardsArticleWithImage,
+        CardsArticleWithSMIcons,
+        CardsProduct,
+        CardsProductWithEvaluation,
+        CardsSimpleProduct,
+        CardsTestimonial,
+        CardsUser,
+        CardsUserWithDetails,
+        FormsNewsletter,
+        FormsSimple,
+        NavbarsECommerce,
+        NavbarsWithAvatar,
+        NavbarsWithSearch,
+        HerosECommerce,
+        HerosWithImage,
+        HerosWithPattern,
+        SectionsAboutMe,
+        SectionsFeature,
+        SectionsOurTeam,
+        SectionsParagraphWithImage,
+        PaginationsSimple,
+        FootersSimple,
+        FootersWithDetails,
+        FootersWithSubscribeForm,
+    },
+    data() {
+        return {
+            categories: [],
+            searchText: 'Alerts',
+            component: new Component(),
+        }
+    },
+
+    created() {
+        this.categories = this.component.all();
+    },
+
+    computed: {
+        list() {
+            return this.component.whereCategory(this.searchText);
+        },
+    },
+}
+</script>

src/components/ui/Authentication/LoginWithSideImage.vue

@@ -67,7 +67,7 @@
     export default {
         data() {
             return {
-                name: 'With Side Image',
+                name: 'Login With Side Image',
                 code: `
         <div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
             <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>

src/components/ui/Authentication/SimpleLogin.vue

@@ -42,7 +42,7 @@
     export default {
         data() {
             return {
-                name: 'Simple Card',
+                name: 'Simple Login',
                 code: `
         <div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
             <div class="py-4 px-6">

src/components/ui/Navbars/WithAvatar.vue

@@ -55,7 +55,7 @@
     export default {
         data() {
             return {
-                name: 'Navbar With Avatar',
+                name: 'With Avatar',
                 isOpen: false,
                 code: `
         <nav class="bg-white shadow">

src/models/Components.js

@@ -0,0 +1,84 @@
+export default [
+    {
+        name: 'Alerts',
+        components: [
+            { name: 'SuccessPop' },
+            { name: 'InfoPop' },
+            { name: 'WarningPop' },
+            { name: 'ErrorPop' },
+            { name: 'NotificationPop' },
+            { name: 'SuccessFullWidth' },
+            { name: 'InfoFullWidth' },
+            { name: 'WarningFullWidth' },
+            { name: 'ErrorFullWidth' },
+
+        ],
+    },
+    {
+        name: 'Authentication',
+        components: [
+            { name: 'SimpleLogin' },
+            { name: 'LoginWithSideImage' },
+        ]
+    },
+    {
+        name: 'Cards',
+        components: [
+            { name: 'Article' },
+            { name: 'ArticleWithSMIcons' },
+            { name: 'ArticleWithImage' },
+            { name: 'Product' },
+            { name: 'ProductWithEvaluation' },
+            { name: 'SimpleProduct' },
+            { name: 'Testimonial' },
+            { name: 'User' },
+            { name: 'UserWithDetails' },
+        ],
+    },
+    {
+        name: 'Forms',
+        components: [
+            { name: 'Simple' },
+            { name: 'Newsletter' },
+        ],
+    },
+    {
+        name: 'Navbars',
+        components: [
+            { name: 'ECommerce' },
+            { name: 'WithSearch' },
+            { name: 'WithAvatar' },
+        ]
+    },
+    {
+        name: 'Heros',
+        components: [
+            { name: 'ECommerce' },
+            { name: 'WithImage' },
+            { name: 'WithPattern' },
+        ],
+    },
+    {
+        name: 'Sections',
+        components: [
+            { name: 'AboutMe' },
+            { name: 'Feature' },
+            { name: 'OurTeam' },
+            { name: 'ParagraphWithImage' },
+        ]
+    },
+    {
+        name: 'Paginations',
+        components: [
+            { name: 'Simple' },
+        ]
+    },
+    {
+        name: 'Footers',
+        components: [
+            { name: 'Simple' },
+            { name: 'WithDetails' },
+            { name: 'WithSubscribeForm' },
+        ]
+    },
+]

src/models/ComponentsFilter.js

@@ -0,0 +1,26 @@
+import components from "./Components";
+
+export default class ComponentsFilter {
+
+    constructor() {
+        this.components = components;
+    }
+
+    all() {
+        return this.components;
+    }
+
+    whereCategory(category) {
+
+        if(this.isEmpty(category)) return this.components;
+
+        let pattern = new RegExp(`^${category}`, 'i');
+
+        return this.components.filter(category => category.name.match(pattern));
+    }
+
+    isEmpty(string) {
+        return string.length === 0;
+    }
+
+}