{"version":3,"file":"y3N8ZWHk.js","sources":["../../../../src/components/loader/tile-row.vue"],"sourcesContent":["<template>\n  <div>\n    <div\n      v-if=\"isAutoblock && numberOfTiles === 1 && !isMobile\"\n      class=\"grid w-full bg-white animate-pulse\"\n    >\n      <div\n        class=\"h-[288px] col-span-2 flex border border-solid border-gray-300 bg-white\"\n      >\n        <div class=\"col-span-1 h-[288px] w-[454px] shrink-0 bg-gray-300\"></div>\n        <div\n          class=\"flex flex-col w-full h-full col-span-1 overflow-hidden p-md gap-y-sm\"\n        >\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[100px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[300px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 mt-auto ml-auto bg-gray-300 w-[100px]\"></div>\n        </div>\n      </div>\n    </div>\n    <div\n      v-else-if=\"isProduct\"\n      class=\"grid w-full grid-cols-1 bg-white md:grid-cols-4 gap-md animate-pulse\"\n    >\n      <div\n        v-for=\"(n, index) in numberOfTiles\"\n        :key=\"index\"\n        class=\"h-[600px] col-span-1 flex flex-col border border-solid border-gray-300 bg-white\"\n      >\n        <div class=\"h-[256px] shrink-0 w-full bg-gray-300\"></div>\n        <div class=\"flex flex-col h-full overflow-hidden p-md gap-y-sm\">\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[100px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[150px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[150px]\"></div>\n          <div class=\"h-4 mt-auto ml-auto bg-gray-300 w-[100px]\"></div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-else\n      class=\"grid w-full grid-cols-1 bg-white md:grid-cols-3 gap-x-sm gap-y-md animate-pulse\"\n    >\n      <div\n        v-for=\"(n, index) in numberOfTiles\"\n        :key=\"index\"\n        class=\"h-[600px] col-span-1 flex flex-col border border-solid border-gray-300 bg-white\"\n      >\n        <div class=\"h-[256px] shrink-0 w-full bg-gray-300\"></div>\n        <div class=\"flex flex-col h-full overflow-hidden p-md gap-y-sm\">\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[100px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[300px]\"></div>\n          <div class=\"h-4 bg-gray-300 w-[200px]\"></div>\n          <div class=\"h-4 mt-auto ml-auto bg-gray-300 w-[100px]\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { breakpointsTailwind } from '@vueuse/core';\n\nconst breakpoints = useBreakpoints(breakpointsTailwind);\nconst isMobile = breakpoints.isSmaller('md');\n\ndefineProps({\n  numberOfTiles: {\n    type: Number,\n    required: false,\n    default: 3,\n  },\n  isAutoblock: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  isProduct: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n</script>\n"],"names":["isMobile","useBreakpoints","breakpointsTailwind"],"mappings":"84DAsEM,MAAAA,EADcC,EAAeC,CAAmB,EACzB,UAAU,IAAI"}