merakiui/components/Main.vue

<template>
    <div class="container px-6 mx-auto">
        <div class="py-16 text-center">
            <h1
                class="text-xl font-medium text-gray-800 md:text-3xl dark:text-white"
            >
                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"
                        >
                            <app-button
                                @click="searchText = category.name"
                                class="px-3 py-1 mt-2 ml-2 text-sm rounded cursor-pointer hover:bg-gray-700 hover:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 focus:outline-none"
                                :class="
                                    category.name === searchText
                                        ? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200'
                                        : 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
                                "
                                >{{ category.name }}</app-button
                            >
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-center mb-10">
            <carbon-ads></carbon-ads>
        </div>

        <div class="w-full max-w-6xl mx-auto">
            <div class="mb-16" v-for="category in list" :key="category.name">
                <h1
                    class="mb-6 text-2xl font-semibold text-gray-800 capitalize dark:text-white"
                    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>
// Application components
import AppButton from "~/components/utilities/AppButton.vue";

// 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 AuthenticationLoginWithSocailMediaLinks from "./ui/Authentication/LoginWithSocailMediaLinks";
import AuthenticationLoginWithSideImage from "./ui/Authentication/LoginWithSideImage";
// Buttons
import ButtonsPrimary from "./ui/Buttons/Primary";
import ButtonsWithIcon from "./ui/Buttons/WithIcon";
import ButtonsWithMenu from "./ui/Buttons/WithMenu";
// 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";
// Dropdowns
import DropdownsSimple from "./ui/Dropdowns/Simple";
import DropdownsNotification from "./ui/Dropdowns/Notification";
// Forms
import FormsNewsletter from "./ui/Forms/Newsletter";
import FormsSimpleNewsletter from "./ui/Forms/SimpleNewsletter";
import FormsSimple from "./ui/Forms/Simple";
import FormsSearch from "./ui/Forms/Search";
import FormsContact from "./ui/Forms/Contact";
// Navbars
import NavbarsECommerce from "./ui/Navbars/ECommerce";
import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
import NavbarsWithCategories from "./ui/Navbars/WithCategories";
import NavbarsWithSearch from "./ui/Navbars/WithSearch";
// Heros
import HerosECommerce from "./ui/Heros/ECommerce";
import HerosWithImage from "./ui/Heros/WithImage";
import HerosWithSideImage from "./ui/Heros/WithSideImage";
import HerosWithBGImage from "./ui/Heros/WithBGImage";
import HerosWithPattern from "./ui/Heros/WithPattern";
// Sidebars
import SidebarsWithSearch from "./ui/Sidebars/WithSearch";
import SidebarsWithAvatar from "./ui/Sidebars/WithAvatar";
// 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";
// Pricing
import PricingSimple from "./ui//Pricing/Simple";
// paginations
import PaginationsSimple from "./ui/Paginations/Simple";
// Footers
import FootersSimple from "./ui/Footers/Simple";
import FootersWithDetails from "./ui/Footers/WithDetails";
import FootersWithLinks from "./ui/Footers/WithLinks";
import FootersWithSubscribeForm from "./ui/Footers/WithSubscribeForm";

import Component from "~/models/ComponentsFilter";

export default {
    components: {
        AppButton,
        AlertsSuccessPop,
        AlertsInfoPop,
        AlertsWarningPop,
        AlertsErrorPop,
        AlertsNotificationPop,
        AlertsSuccessFullWidth,
        AlertsInfoFullWidth,
        AlertsWarningFullWidth,
        AlertsErrorFullWidth,
        AuthenticationSimpleLogin,
        AuthenticationLoginWithSocailMediaLinks,
        AuthenticationLoginWithSideImage,
        ButtonsPrimary,
        ButtonsWithIcon,
        ButtonsWithMenu,
        CardsArticle,
        CardsArticleWithImage,
        CardsArticleWithSMIcons,
        CardsProduct,
        CardsProductWithEvaluation,
        CardsSimpleProduct,
        CardsTestimonial,
        CardsUser,
        CardsUserWithDetails,
        DropdownsSimple,
        DropdownsNotification,
        FormsNewsletter,
        FormsSimpleNewsletter,
        FormsSimple,
        FormsSearch,
        FormsContact,
        NavbarsECommerce,
        NavbarsWithAvatar,
        NavbarsWithCategories,
        NavbarsWithSearch,
        HerosECommerce,
        HerosWithImage,
        HerosWithSideImage,
        HerosWithBGImage,
        HerosWithPattern,
        SidebarsWithAvatar,
        SidebarsWithSearch,
        SectionsAboutMe,
        SectionsFeature,
        SectionsOurTeam,
        SectionsParagraphWithImage,
        PricingSimple,
        PaginationsSimple,
        FootersSimple,
        FootersWithDetails,
        FootersWithLinks,
        FootersWithSubscribeForm,
    },
    data() {
        return {
            categories: [],
            searchText: "Alerts",
            component: new Component(),
        };
    },

    created() {
        this.categories = this.component.all();
    },

    computed: {
        list() {
            return this.component.whereCategory(this.searchText);
        },
    },
};
</script>