Adding a ton of stuff

web/src/components/blog-posts/PublicBlogPostsList.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-skeleton-loader
+    v-if="isEmpty(publicBlogPosts) && isLoading"
+    type="list-item-three-line"
+  />
+  <v-empty-state
+    v-else-if="isEmpty(publicBlogPosts) && !isLoading"
+    text="No blog posts found."
+  />
+  <template v-else>
+    <BlogPostListItemCard
+      v-for="blogPost in publicBlogPosts"
+      :key="blogPost.id"
+      :blog-post="blogPost"
+    />
+  </template>
+  <EnhancedPagination
+    v-model="page"
+    v-model:per-page="perPage"
+    :total-count="totalCount"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { isEmpty } from "lodash"
+
+import useRouteQueryPagination from "@/use/utils/use-route-query-pagination"
+import usePublicBlogPosts, {
+  type PublicBlogPostFiltersOptions,
+  type PublicBlogPostQueryOptions,
+  type PublicBlogPostWhereOptions,
+} from "@/use/use-public-blog-posts"
+
+import EnhancedPagination from "@/components/common/EnhancedPagination.vue"
+import BlogPostListItemCard from "@/components/blog-posts/BlogPostListItemCard.vue"
+
+const props = withDefaults(
+  defineProps<{
+    filters?: PublicBlogPostFiltersOptions
+    where?: PublicBlogPostWhereOptions
+    routeQuerySuffix?: string
+    waiting?: boolean
+  }>(),
+  {
+    filters: () => ({}),
+    where: () => ({}),
+    routeQuerySuffix: "BlogPosts",
+    waiting: false,
+  }
+)
+
+const { page, perPage } = useRouteQueryPagination({ routeQuerySuffix: props.routeQuerySuffix })
+const blogPostQueryOptions = computed<PublicBlogPostQueryOptions>(() => ({
+  where: props.where,
+  filters: props.filters,
+  page: page.value,
+  perPage: perPage.value,
+}))
+
+const { publicBlogPosts, totalCount, isLoading, refresh } = usePublicBlogPosts(
+  blogPostQueryOptions,
+  { skipWatchIf: () => props.waiting }
+)
+
+defineExpose({ refresh })
+</script>