feat: update Pagination component

adrian-ub · Jul 27, 2024 · da8ea0f · da8ea0f
1 parent 63ef4ab
commit da8ea0f
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 46 deletions.
diff --git a/apps/www/astro.config.mjs b/apps/www/astro.config.mjs
@@ -10,53 +10,76 @@ import simpleStackQuery from "simple-stack-query";
 // https://astro.build/config
 export default defineConfig({
   site: siteConfig.url,
-  integrations: [starlight({
-    title: siteConfig.name,
-    expressiveCode: {
-      themes: [theme]
-    },
-    logo: {
-      dark: "./src/assets/logo-dark.svg",
-      light: "./src/assets/logo-light.svg"
-    },
-    favicon: "./src/assets/logo-dark.svg",
-    social: {
-      github: siteConfig.links.github,
-      "x.com": siteConfig.links.twitter
-    },
-    sidebar: [{
-      label: "Getting Started",
-      items: [{
-        label: "Introduction",
-        slug: "docs"
-      }]
-    }, {
-      label: "Components",
-      autogenerate: {
-        directory: "docs/components"
-      }
-    }],
-    customCss: ["./src/tailwind.css"],
-    components: {
-      Header: "./src/components/starlight/header/Header.astro",
-      PageFrame: "./src/components/starlight/PageFrame.astro",
-      SiteTitle: "./src/components/starlight/SiteTitle.astro",
-      SocialIcons: "./src/components/starlight/SocialIcons.astro",
-      Search: "./src/components/starlight/Search.astro",
-      Hero: "./src/components/starlight/Hero.astro",
-      ContentPanel: "./src/components/starlight/ContentPanel.astro",
-      PageTitle: "./src/components/starlight/PageTitle.astro",
-      MarkdownContent: "./src/components/starlight/MarkdownContent.astro",
-      TwoColumnContent: "./src/components/starlight/TwoColumnContent.astro",
-      Sidebar: "./src/components/starlight/Sidebar.astro"
-    }
-  }), tailwind(), angular(), simpleStackQuery()],
+  integrations: [
+    starlight({
+      title: siteConfig.name,
+      expressiveCode: {
+        themes: [theme],
+      },
+      logo: {
+        dark: "./src/assets/logo-dark.svg",
+        light: "./src/assets/logo-light.svg",
+      },
+      favicon: "./src/assets/logo-dark.svg",
+      social: {
+        github: siteConfig.links.github,
+        "x.com": siteConfig.links.twitter,
+      },
+      sidebar: [
+        {
+          label: "Getting Started",
+          items: [
+            {
+              label: "Introduction",
+              slug: "docs",
+            },
+          ],
+        },
+        {
+          label: "Components",
+          autogenerate: {
+            directory: "docs/components",
+          },
+        },
+      ],
+      customCss: ["./src/tailwind.css"],
+      components: {
+        Header: "./src/components/starlight/header/Header.astro",
+        PageFrame: "./src/components/starlight/PageFrame.astro",
+        SiteTitle: "./src/components/starlight/SiteTitle.astro",
+        SocialIcons: "./src/components/starlight/SocialIcons.astro",
+        Search: "./src/components/starlight/Search.astro",
+        Hero: "./src/components/starlight/Hero.astro",
+        ContentPanel: "./src/components/starlight/ContentPanel.astro",
+        PageTitle: "./src/components/starlight/PageTitle.astro",
+        MarkdownContent: "./src/components/starlight/MarkdownContent.astro",
+        TwoColumnContent: "./src/components/starlight/TwoColumnContent.astro",
+        Sidebar: "./src/components/starlight/Sidebar.astro",
+        Pagination: "./src/components/starlight/Pagination.astro",
+      },
+    }),
+    tailwind(),
+    angular(),
+    simpleStackQuery(),
+  ],
   vite: {
     optimizeDeps: {
-      include: ["@radix-ng/primitives", "@angular/common", "@angular/core", "@angular/cdk", "@ng-icons/core", "@ng-icons/lucide"]
+      include: [
+        "@radix-ng/primitives",
+        "@angular/common",
+        "@angular/core",
+        "@angular/cdk",
+        "@ng-icons/core",
+        "@ng-icons/lucide",
+      ],
     },
     ssr: {
-      noExternal: ["@radix-ng/primitives", "@angular/cdk", "@ng-icons/core", "@ng-icons/lucide"]
-    }
-  }
-});
+      noExternal: [
+        "@radix-ng/primitives",
+        "@angular/cdk",
+        "@ng-icons/core",
+        "@ng-icons/lucide",
+      ],
+    },
+  },
+});
diff --git a/apps/www/src/components/starlight/Pagination.astro b/apps/www/src/components/starlight/Pagination.astro
@@ -0,0 +1,38 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+
+import { buttonVariants } from "@/registry/default/ui/button.directive";
+import { cn } from "@/lib/utils";
+
+import { radixChevronLeft, radixChevronRight } from "@ng-icons/radix-icons";
+
+const { dir, pagination } = Astro.props;
+const { prev, next } = pagination;
+---
+
+<div class="flex flex-row items-center justify-between" dir={dir}>
+  {
+    prev && (
+      <a
+        href={prev.href}
+        rel="prev"
+        class={buttonVariants({ variant: "outline" })}
+      >
+        <fragment set:html={radixChevronLeft} class="mr-2 h-4 w-4" />
+        {prev.label}
+      </a>
+    )
+  }
+  {
+    next && (
+      <a
+        href={next.href}
+        rel="next"
+        class={cn(buttonVariants({ variant: "outline" }), "ml-auto")}
+      >
+        {next.label}
+        <fragment set:html={radixChevronRight} class="ml-2 h-4 w-4" />
+      </a>
+    )
+  }
+</div>