@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/blog-home-section/sub-components/Pagination/index.tsx

@@ -0,0 +1,107 @@
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../utils/cx";
+import { getPageNumbers } from "../../utils/pagination";
+import {
+  CaretDoubleLeftSVG,
+  CaretLeftSVG,
+  CaretRightSVG,
+  CaretDoubleRightSVG,
+  DotsThreeSVG,
+} from "../icons";
+
+interface Props {
+  currentPage: number;
+  totalPages: number;
+  hasPrev: boolean;
+  hasNext: boolean;
+  onPageChange: (page: number) => void;
+}
+
+const Pagination = observer(function Pagination({
+  currentPage,
+  totalPages,
+  hasPrev,
+  hasNext,
+  onPageChange,
+}: Props) {
+  if (totalPages <= 1) return null;
+
+  const pages = getPageNumbers(currentPage, totalPages);
+
+  const showFirstBtn = totalPages > 5 && currentPage >= 5;
+  const showLastBtn = totalPages > 5 && currentPage <= totalPages - 4;
+
+  return (
+    <nav className="kombos-pagination" aria-label="Pagination">
+      <div className="kombos-pagination__nav-group">
+        {showFirstBtn && (
+          <button
+            type="button"
+            className="kombos-pagination__nav-btn"
+            onClick={() => onPageChange(1)}
+            aria-label="First page"
+          >
+            <CaretDoubleLeftSVG />
+          </button>
+        )}
+        <button
+          type="button"
+          className="kombos-pagination__nav-btn"
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={!hasPrev}
+          aria-label="Previous page"
+        >
+          <CaretLeftSVG />
+        </button>
+      </div>
+
+      <div className="kombos-pagination__pages">
+        {pages.map((page, i) =>
+          page === "dots" ? (
+            <span key={`dots-${i}`} className="kombos-pagination__dots">
+              <DotsThreeSVG />
+            </span>
+          ) : (
+            <button
+              key={page}
+              type="button"
+              className={cx(
+                "kombos-pagination__page",
+                "text-md-semibold",
+                page === currentPage && "kombos-pagination__page--active"
+              )}
+              onClick={() => onPageChange(page)}
+              aria-current={page === currentPage ? "page" : undefined}
+            >
+              {page}
+            </button>
+          )
+        )}
+      </div>
+
+      <div className="kombos-pagination__nav-group">
+        <button
+          type="button"
+          className="kombos-pagination__nav-btn"
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={!hasNext}
+          aria-label="Next page"
+        >
+          <CaretRightSVG />
+        </button>
+        {showLastBtn && (
+          <button
+            type="button"
+            className="kombos-pagination__nav-btn"
+            onClick={() => onPageChange(totalPages)}
+            aria-label="Last page"
+          >
+            <CaretDoubleRightSVG />
+          </button>
+        )}
+      </div>
+    </nav>
+  );
+});
+
+export default Pagination;

package/data/section-templates/blog-home-section/sub-components/Pagination/styles.css

@@ -0,0 +1,88 @@
+/* ===== Pagination ===== */
+.kombos-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.5rem;
+  max-width: 100%;
+}
+
+/* Left/right button groups (first+prev, next+last) */
+.kombos-pagination__nav-group {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Navigation buttons (first, prev, next, last) */
+.kombos-pagination__nav-btn {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--kombos-gray-50);
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--kombos-gray-900);
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.kombos-pagination__nav-btn:hover:not(:disabled) {
+  border-color: var(--kombos-gray-300);
+  background: var(--kombos-gray-100);
+}
+
+.kombos-pagination__nav-btn:disabled {
+  cursor: default;
+  color: var(--kombos-gray-300);
+  background: var(--kombos-gray-50);
+}
+
+/* Page numbers container */
+.kombos-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Page number buttons — 32×32 */
+.kombos-pagination__page {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+  color: var(--kombos-gray-500);
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.kombos-pagination__page:hover {
+  color: var(--kombos-gray-900);
+  background: var(--kombos-gray-50);
+}
+
+.kombos-pagination__page--active {
+  color: var(--kombos-white);
+  background: var(--kombos-gray-900);
+  pointer-events: none;
+}
+
+/* Dots separator */
+.kombos-pagination__dots {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  color: var(--kombos-gray-400);
+}