<script lang="ts" setup>
  definePageMeta({
    layout: "dashboard"
  });
  const color = useColorMode();
  color.preference = "dark";

  const cards: any[] = [
    {
      title: "1",
      icon: "meteor-icons:chevron-up",
      desc: "pila"
    },
    {
      title: "2",
      icon: "majesticons:award",
      desc: "bolas"
    },
    {
      title: "3",
      icon: "svg-spinners:clock",
      desc: "espera aí um becs bro"
    },

  ];
</script>

<template>
  <UContainer>
    
    <UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>

    <div class="mt-1 mb-2 flex flex-col w-full relative z-0">
      <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
      <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
      <UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge> 
    </div>
    
    <div class="mx-auto max-w-220">
      <div class="row">
          <UPageCard 
            v-for="card in cards"
            :title="card.title"
            :description="card.desc"
            :icon="card.icon"
            variant="subtle"
            class="dark-widget-bg col-md"
          />
        </div>
    </div>
  </UContainer>
</template>

<style scoped>
@import "bootstrap/dist/css/bootstrap-grid.css";

</style>