@lobehub/ui/es/Image/viewer/GalleryNav.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import Center from "../../Flex/Center.mjs";
import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
import { useTranslation } from "../../i18n/useTranslation.mjs";
import { styles } from "../style.mjs";
import image_default from "../../i18n/resources/en/image.mjs";
import { memo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { ChevronLeft, ChevronRight } from "lucide-react";
//#region src/Image/viewer/GalleryNav.tsx
const GalleryNav = memo(({ current, hasNext, hasPrev, next, prev, total }) => {
	const { t } = useTranslation(image_default);
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
		hasPrev && /* @__PURE__ */ jsx(ActionIcon, {
			className: cx(styles.viewerNavButton, styles.viewerNavPrev),
			icon: ChevronLeft,
			size: "large",
			title: t("image.prev"),
			onClick: prev
		}),
		hasNext && /* @__PURE__ */ jsx(ActionIcon, {
			className: cx(styles.viewerNavButton, styles.viewerNavNext),
			icon: ChevronRight,
			size: "large",
			title: t("image.next"),
			onClick: next
		}),
		/* @__PURE__ */ jsxs(Center, {
			horizontal: true,
			className: styles.viewerCounter,
			children: [
				current + 1,
				" / ",
				total
			]
		})
	] });
});
GalleryNav.displayName = "GalleryNav";
//#endregion
export { GalleryNav as default };

//# sourceMappingURL=GalleryNav.mjs.map