Read Astro Codes (Javascript and JSX)

---
import type { Post, Page } from "@interfaces/data";
import PostCard from "@components/PostCard.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import BaseCard from "@components/BaseCard.astro";
import Pagination from "@components/widgets/Pagination.astro";
import CardGroup from "@components/temple/CardGroup.astro";
import { t } from "@config";
import { Icon } from "astro-icon/components";
import { generatePageLinks } from "@utils/blogUtils";
import { getCategoryPaginationPaths } from "@utils/paginationUtils";

export async function getStaticPaths({ paginate }: { paginate: any }) {
  return getCategoryPaginationPaths({ paginate });
}

const { page } = Astro.props as { page: Page };
const params = Astro.params as { category: string; page: string };

const totalPages = Math.ceil(page.total / page.size);
const pageLinks = generatePageLinks(totalPages);
---

<BaseLayout title={`${t("label.categoryPage")} - ${params.category}`}>
  <BaseCard title={t("label.categoryPage")}>
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
      <div class="flex items-center gap-2">
        <Icon name="lucide:folder" class="w-6 h-6 text-primary" />
        <h1 id="h1" class="text-2xl md:text-3xl font-bold">{params.category}</h1>
        <div class="badge badge-primary">{page.total} {page.total === 1 ? t("label.post") : t("label.posts")}</div>
      </div>
      <a href="/blog/categories" class="btn btn-outline btn-sm gap-2">
        <Icon name="lucide:folder" class="w-4 h-4" />
        <span>{t("label.allCategories")}</span>
      </a>
    </div>
    <div class="divider my-2"></div>
    <p class="text-sm opacity-75">{t("label.categoryDescription")}</p>
  </BaseCard>
  <CardGroup cols="1" gap="6">
    {
      page.data.map((blog: Post) => (
        <PostCard
          title={blog.data.title}
          image={blog.data.image}
          description={blog.data.description}
          url={"/blog/" + blog.slug}
          pubDate={blog.data.pubDate}
          badge={blog.data.badge}
          categories={blog.data.categories}
          tags={blog.data.tags}
          word={blog.remarkPluginFrontmatter.totalCharCount}
          time={blog.remarkPluginFrontmatter.readingTime}
        />
      ))
    }
  </CardGroup>
  <Pagination page={page} totalPages={totalPages} pageLinks={pageLinks} baseUrl={`/blog/category/${params.category}`} />
</BaseLayout>

---
import type { Post, Page } from "@interfaces/data";
---

---
import PostCard from "@components/PostCard.astro";
import BaseLayout from "@layouts/BaseLayout.astro";
import BaseCard from "@components/BaseCard.astro";
import Pagination from "@components/widgets/Pagination.astro";
import CardGroup from "@components/temple/CardGroup.astro";
---