<script setup lang="ts">
import { ref } from 'vue';
/* Breadcrumb component */
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import BlogCards from "@/components/widgets/cards/BlogCards.vue";
import ProductCards from "@/components/widgets/cards/ProductCards.vue";
import MusicCards from "@/components/widgets/cards/MusicCards.vue";
import FollowerCards from "@/components/widgets/cards/FollowerCards.vue";
import UserCards from "@/components/widgets/cards/UserCards.vue";
import ProfileCards from "@/components/widgets/cards/ProfileCards.vue";
import Settings from "@/components/widgets/cards/Settings.vue";
import GiftCards from "@/components/widgets/cards/GiftCards.vue";
import UpcommingActivityCard from "@/components/widgets/cards/UpcommingActivityCard.vue";
// import DailyActivities from '@/components/dashboards/dashboard2/DailyActivities.vue';
import PaymentGateways from '@/components/widgets/cards/PaymentGateways.vue';

// template breadcrumb
const page = ref({ title: 'Cards Widgets' });
const breadcrumbs = ref([
    {
        text: 'Home',
        disabled: false,
        href: '#'
    },
    {
        text: 'Cards Widgets',
        disabled: true,
        href: '#'
    }
]);
</script>
<template>
    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>        
    <v-row>
        <!-- Blog cards -->
        <v-col cols="12">
            <BlogCards/>
        </v-col>
        <!-- Product cards -->
        <v-col cols="12">
            <ProductCards/>
        </v-col>
        <!-- Music cards -->
        <v-col cols="12">
            <MusicCards/>
        </v-col>
        <!-- Follower cards -->
        <v-col cols="12">
            <FollowerCards/>
        </v-col>
        <!-- User cards -->
        <v-col cols="12">
            <UserCards/>
        </v-col>
        <!-- Profile cards -->
        <v-col cols="12">
            <ProfileCards/>
        </v-col>
        <!-- Settings cards -->
        <v-col cols="12" md="4">
            <Settings/>
        </v-col>
        <!-- Gift cards -->
        <v-col cols="12" md="8">
            <GiftCards/>    
        </v-col>
        <!-- Payment Gateways card -->
        <v-col cols="12" md="4">
           <PaymentGateways/>
        </v-col>
        <!-- Upcomming Activity card -->
        <v-col cols="12" md="4">
            <UpcommingActivityCard/>   
        </v-col>
        <!-- Recent Transactions -->
        <v-col cols="12" md="4">
            <DailyActivities/>
        </v-col>
    </v-row>
</template>
