@helpwave/hightide/dist/components/Pagination.mjs

helpwave's component and theming library

// src/components/Pagination.tsx
import { ChevronLast, ChevronLeft, ChevronFirst, ChevronRight } from "lucide-react";
import clsx from "clsx";

// src/hooks/useLanguage.tsx
import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";

// src/hooks/useLocalStorage.tsx
import { useCallback, useEffect, useState } from "react";

// src/hooks/useLanguage.tsx
import { jsx } from "react/jsx-runtime";
var DEFAULT_LANGUAGE = "en";
var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
var useLanguage = () => useContext(LanguageContext);

// src/hooks/useTranslation.ts
var useTranslation = (defaults, translationOverwrite = {}) => {
  const { language: languageProp, translation: overwrite } = translationOverwrite;
  const { language: inferredLanguage } = useLanguage();
  const usedLanguage = languageProp ?? inferredLanguage;
  let defaultValues = defaults[usedLanguage];
  if (overwrite && overwrite[usedLanguage]) {
    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
  }
  return defaultValues;
};

// src/components/Pagination.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var defaultPaginationTranslations = {
  en: {
    of: "of"
  },
  de: {
    of: "von"
  }
};
var Pagination = ({
  overwriteTranslation,
  page,
  numberOfPages,
  onPageChanged
}) => {
  const translation = useTranslation(defaultPaginationTranslations, overwriteTranslation);
  const changePage = (page2) => {
    onPageChanged(page2);
  };
  const noPages = numberOfPages === 0;
  const onFirstPage = page === 0 && !noPages;
  const onLastPage = page === numberOfPages - 1;
  return /* @__PURE__ */ jsxs("div", { className: clsx("row", { "opacity-30": noPages }), children: [
    /* @__PURE__ */ jsx2("button", { onClick: () => changePage(0), disabled: onFirstPage, children: /* @__PURE__ */ jsx2(ChevronFirst, { className: clsx({ "opacity-30": onFirstPage }) }) }),
    /* @__PURE__ */ jsx2("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: /* @__PURE__ */ jsx2(ChevronLeft, { className: clsx({ "opacity-30": onFirstPage }) }) }),
    /* @__PURE__ */ jsxs("div", { className: "min-w-[80px] justify-center mx-2", children: [
      /* @__PURE__ */ jsx2("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }),
      /* @__PURE__ */ jsx2("span", { className: "select-none mx-2", children: translation.of }),
      /* @__PURE__ */ jsx2("span", { className: "select-none text-left flex-1", children: numberOfPages })
    ] }),
    /* @__PURE__ */ jsx2("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx2(ChevronRight, { className: clsx({ "opacity-30": onLastPage }) }) }),
    /* @__PURE__ */ jsx2("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: /* @__PURE__ */ jsx2(ChevronLast, { className: clsx({ "opacity-30": onLastPage }) }) })
  ] });
};
export {
  Pagination
};
//# sourceMappingURL=Pagination.mjs.map