<script setup>
import Products from "@/components/imports/Products.vue";
const { $snackbar } = useNuxtApp();
</script>
<template>
  <div class="fixed-grid has-12-cols">
    <div class="grid">
      <div class="cell is-col-span-12">
        <button @click="$snackbar('heyo', 'Success')">click</button>
        <hr />
        <div class="is-flex">
          <div class="size-16 has-background-black"></div>
          <div class="size-16 has-background-black-bis"></div>
          <div class="size-16 has-background-black-ter"></div>
          <div class="size-16 has-background-grey-darker"></div>
          <div class="size-16 has-background-grey-dark"></div>
          <div class="size-16 has-background-grey"></div>
          <div class="size-16 has-background-grey-light"></div>
          <div class="size-16 has-background-grey-lighter"></div>
          <div class="size-16 has-background-grey-lightest"></div>
          <div class="size-16 has-background-white-ter"></div>
          <div class="size-16 has-background-white-bis"></div>
          <div class="size-16 has-background-white"></div>
        </div>
        <div class="is-flex">
          <div class="size-16 has-background-grey"></div>
        </div>
      </div>
      <div class="cell is-col-span-12">
        <Products />
      </div>
    </div>
  </div>
</template>
