Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 436x 642x 642x 2x 445x 1056x 1056x 1056x 1056x | import { useTranslation } from "react-i18next";
import { DEFAULT_LIMIT, LIMITS } from "~app/utils/validation";
import { Select } from "~components/select";
export const LimitOption = ({
limit: selectedValue,
onChange,
isDisabled,
}: {
limit?: number;
onChange?: (limit: number) => void;
isDisabled?: boolean;
}) => {
const { t } = useTranslation("default");
return (
<Select
label={t("components.pagination.label")}
className="max-w-40 shrink-0 justify-self-end"
selectedKeys={selectedValue ? [selectedValue.toString()] : []}
onSelectionChange={(selected) =>
onChange?.(selected[0] ? Number(selected[0]) : DEFAULT_LIMIT)
}
isDisabled={isDisabled}
renderValue={(items) => items.map(({ limit }) => limit).join(", ")}
items={LIMITS.map((limit) => ({ limit }))}
getKey={({ limit }) => limit.toString()}
getTextValue={({ limit }) =>
t("components.pagination.perPage", { limit })
}
placeholder={t("components.pagination.label")}
>
{({ limit }) => limit}
</Select>
);
};
|