{"version":3,"file":"CSrk4ngw.js","sources":["../../../../components/blog/CategoryNavigator.vue","../../../../components/blog/CategoryList.vue"],"sourcesContent":["<template>\n  <div class=\"category-navigator\">\n    <div class=\"header-container\">\n      <h3>{{ t(\"title\") }}</h3>\n      <p>{{ t(\"subtitle\") }}</p>\n    </div>\n    <div class=\"category-list-wrapper\">\n      <ul class=\"category-list\">\n        <li v-for=\"category in categories\">\n          <CjaButton\n            :color=\"'light-blue'\"\n            :href=\"`/blog/temas?category=${category}`\"\n            :alt-anchor=\"NuxtLink\"\n          >\n            {{ category }}\n          </CjaButton>\n        </li>\n      </ul>\n    </div>\n    <div class=\"btn-container\">\n      <CjaButton\n        :href=\"'/blog/temas'\"\n        :alt-anchor=\"NuxtLink\"\n        :type=\"'tertiary'\"\n        :icon=\"'m-cgg-icon--chevron-right'\"\n        >{{ t(\"btn\") }}</CjaButton\n      >\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NuxtLink } from \"#components\";\nimport { CjaButton } from \"cja-phoenix\";\n\ndefineProps<{ categories: string[] }>();\n\nconst { t } = useI18n();\n</script>\n\n<style lang=\"scss\" scoped>\n.category-navigator {\n  padding: 24px 0 40px;\n\n  .header-container {\n    margin-bottom: 24px;\n\n    h3 {\n      font-size: 24px;\n      font-weight: 700;\n      line-height: 32px;\n      margin: 0 0 8px;\n    }\n\n    p {\n      font-size: 16px;\n      line-height: 24px;\n      margin: 0;\n    }\n  }\n\n  .category-list-wrapper {\n    overflow-x: auto;\n    padding-bottom: 24px;\n    margin-bottom: 32px;\n  }\n\n  .category-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    gap: 12px;\n\n    li {\n      flex-shrink: 0;\n    }\n  }\n\n  .btn-container {\n    display: flex;\n    justify-content: center;\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"title\": \"Sabe tudo por tema\",\n    \"subtitle\": \"Escolhe um tema\",\n    \"btn\": \"Ver todos os artigos\"\n  }\n}\n</i18n>\n","<template>\n  <div class=\"category-list\">\n    <BlogCategoryPicker :categories=\"categories\" v-model=\"category\" />\n\n    <div class=\"category-posts\" ref=\"postsContainer\">\n      <BlogPostList :posts=\"posts\" :status=\"status\" />\n      <div class=\"btn-container\">\n        <CjaButton\n          :href=\"category ? `/blog/temas?category=${category}` : '/blog/temas'\"\n          :alt-anchor=\"NuxtLink\"\n          :type=\"'secondary'\"\n          :icon=\"'m-cgg-icon--chevron-right'\"\n        >\n          {{ t(\"btn\") }}\n        </CjaButton>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NuxtLink } from \"#components\";\nimport { CjaButton } from \"cja-phoenix\";\nimport { useCategoryPosts } from \"~/composables/storyblok/useCategoryPosts\";\n\ndefineProps<{\n  categories: string[];\n}>();\n\nconst { t } = useI18n();\n\nconst postsContainer = ref();\nconst category = ref();\n\nconst { status, posts } = useCategoryPosts(category);\n</script>\n\n<style lang=\"scss\" scoped>\n.category-list {\n  padding-bottom: 32px;\n}\n\n.category-posts {\n  padding: 32px 0;\n}\n\n.btn-container {\n  margin-top: 24px;\n  display: flex;\n  justify-content: center;\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"btn\": \"Ver mais artigos\"\n  }\n}\n</i18n>\n"],"names":["useI18n","postsContainer","ref","category","status","posts","useCategoryPosts"],"mappings":"ifAqCM,KAAA,CAAE,CAAE,EAAIA,EAAQ,i7BCRhB,KAAA,CAAE,CAAE,EAAIA,EAAQ,EAEhBC,EAAiBC,EAAI,EACrBC,EAAWD,EAAI,EAEf,CAAE,OAAAE,EAAQ,MAAAC,GAAUC,EAAiBH,CAAQ"}