PvSuggestionTag

<script setup lang="ts">
import PvSuggestionTag from "@/components/base/PvSuggestionTag/PvSuggestionTag.vue";
import { TagSize } from "@/components/base/PvTag/types";

const tagSizeOptions = ["sm", "md", "lg"] as TagSize[];

const tagSizeLength = tagSizeOptions.length + 1;
</script>

<template>
  <div
    class="container pv-stack-16"
    :style="{
      'grid-template-columns': `repeat(${tagSizeLength}, 1fr`,
      'grid-template-rows': 'repeat(5, 1fr',
      height: '250px',
    }"
  >
    <div></div>
    <div v-for="size in tagSizeOptions" :key="'header-' + size">
      
    </div>

    <div>Suggestion Tag</div>
    <PvSuggestionTag
      v-for="size in tagSizeOptions"
      :key="size"
      label="Aetna"
      :size="size"
    />
    <div>Suggestion Tag with Icon</div>
    <PvSuggestionTag
      v-for="size in tagSizeOptions"
      :key="size"
      label="Aetna"
      :size="size"
      show-icon
    />
    <div>Suggestion Tag Rounded</div>
    <PvSuggestionTag
      v-for="size in tagSizeOptions"
      :key="size"
      label="Aetna"
      :size="size"
      rounded
    />
    <div>Suggestion Tag Rounded Tag witn Icon</div>
    <PvSuggestionTag
      v-for="size in tagSizeOptions"
      :key="size"
      label="Aetna"
      :size="size"
      rounded
      show-icon
    />
  </div>
</template>

<style>
.container {
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
}
</style>