Merge pull request #32 from gone-bike/feature/pagination

Feature/pagination

astro/src/components/base/BasePagination.astro

@@ -0,0 +1,143 @@
+---
+export interface BasePaginationProps {
+ totalPages: number;
+ activePage: number;
+ class?: string;
+}
+
+const {
+ totalPages,
+ activePage = 1,
+ class: classes,
+} = Astro.props as BasePaginationProps;
+
+function generatePageLinks(): Array<Record<string, string | number>> {
+ const links = [];
+ const ellipsisBack = { label: "...", href: "#" };
+ const ellipsisForward = { label: "...", href: "#" };
+
+ if (totalPages <= 7) {
+ for (let i = 1; i <= totalPages; i++) {
+ links.push({ label: i, href: "#" });
+ }
+
+ return links;
+ }
+ let start, end;
+
+ if (activePage <= 4) {
+ start = 1;
+ end = 4;
+
+ for (let i = start; i <= end; i++) {
+ links.push({ label: i, href: "#" });
+ }
+ links.push(ellipsisForward);
+
+ return links;
+ }
+
+ if (activePage > totalPages - 4) {
+ start = totalPages - 3;
+ end = totalPages;
+
+ links.push(ellipsisBack);
+ for (let i = start; i <= end; i++) {
+ links.push({ label: i, href: "#" });
+ }
+
+ return links;
+ }
+
+ start = activePage - 2;
+ end = activePage + 2;
+
+ links.push({ label: 1, href: "#" });
+ links.push(ellipsisBack);
+ for (let i = start; i <= end; i++) {
+ links.push({ label: i, href: "#" });
+ }
+ links.push(ellipsisForward);
+ links.push({ label: totalPages, href: "#" });
+
+ return links;
+}
+---
+
+<nav class:list={["", {}, classes]} aria-label="search pagination">
+ <ul class="inline-flex items-center -space-x-px text-sm flex-wrap">
+ {
+ activePage !== 1 && (
+ <li>
+ <a
+ href="#"
+ class="block px-3 py-2 text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700"
+ >
+ <span class="sr-only">Previous</span>
+ <svg
+ aria-hidden="true"
+ class="w-5 h-5"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </a>
+ </li>
+ )
+ }
+ {
+ generatePageLinks().map((link) => (
+ <li>
+ <a
+ href={link.href as string}
+ class:list={[
+ "block px-3 py-2 text-sm text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700",
+ {
+ active: link.label === activePage,
+ },
+ ]}
+ >
+ {link.label}
+ </a>
+ </li>
+ ))
+ }
+ {
+ activePage !== totalPages && (
+ <li>
+ <a
+ href="#"
+ class="block px-3 py-2 text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700"
+ >
+ <span class="sr-only">Next</span>
+ <svg
+ aria-hidden="true"
+ class="w-5 h-5"
+ fill="currentColor"
+ viewBox="0 0 20 20"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ </a>
+ </li>
+ )
+ }
+ </ul>
+</nav>
+
+<style>
+ .active {
+ @apply text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700;
+ }
+</style>

astro/src/components/sections/HeroSection.astro

@@ -2,6 +2,7 @@
 import { t } from "i18next";
 import { localizePath } from "astro-i18next";
 import BaseContainer from "@components/base/BaseContainer.astro";
+import SearchForm from "@components/SearchForm.astro";
 ---
 
 <section class="pt-9 pb-14 md:pt-6 xl:pt-10">
@@ -39,7 +40,7 @@ import BaseContainer from "@components/base/BaseContainer.astro";
  <div
  class="mt-8 flex flex-col items-center justify-center gap-4 md:flex-row"
  >
- <a
+ <!-- <a
  class="w-full flex items-center justify-center gap-3 rounded-lg py-4 px-4 border border-customgray-900 md:w-max md:px-6"
  href={localizePath("/create-report")}
  >
@@ -60,7 +61,8 @@ import BaseContainer from "@components/base/BaseContainer.astro";
  <span class="font-medium text-customgray-800 md:block md:w-max"
  >Create Report</span
  >
- </a>
+ </a> -->
+ <SearchForm />
  <a
  class="w-full flex items-center justify-center gap-3 bg-primary-600 rounded-lg py-4 px-4 border border-transparent md:w-max md:px-6"
  href={localizePath("/create-report")}

astro/src/pages/index.astro

@@ -7,6 +7,7 @@ import StatsSection from "@components/sections/StatsSection.astro";
 import Bike from "@components/Card.astro";
 import HeroSection from "@components/sections/HeroSection.astro";
 import BikesSection from "@components/sections/BikesSection.astro";
+import BasePagination from "@components/base/BasePagination.astro";
 
 changeLanguage("en");
 ---
@@ -29,6 +30,12 @@ changeLanguage("en");
  </div>
  <br />
 
+ <BasePagination
+ class="flex justify-center my-4"
+ activePage={12}
+ totalPages={100}
+ />
+
  <!--
  localizePath("/report/[id]").replace('[id]','224')
  <div