41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import type { PageNumberRendererProps } from "./types";
|
|
|
|
export function PageNumberRenderer({ component, currentPageId, layoutConfig }: PageNumberRendererProps) {
|
|
const format = component.pageNumberFormat || "number";
|
|
const sortedPages = [...layoutConfig.pages].sort((a, b) => a.page_order - b.page_order);
|
|
const currentPageIndex = sortedPages.findIndex((p) => p.page_id === currentPageId);
|
|
const totalPages = sortedPages.length;
|
|
const currentPageNum = currentPageIndex + 1;
|
|
|
|
let pageNumberText = "";
|
|
switch (format) {
|
|
case "number":
|
|
pageNumberText = `${currentPageNum}`;
|
|
break;
|
|
case "numberTotal":
|
|
pageNumberText = `${currentPageNum} / ${totalPages}`;
|
|
break;
|
|
case "koreanNumber":
|
|
pageNumberText = `${currentPageNum} 페이지`;
|
|
break;
|
|
default:
|
|
pageNumberText = `${currentPageNum}`;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex h-full w-full items-center justify-center"
|
|
style={{
|
|
fontSize: `${component.fontSize}px`,
|
|
color: component.fontColor,
|
|
fontWeight: component.fontWeight,
|
|
textAlign: component.textAlign as "left" | "center" | "right",
|
|
}}
|
|
>
|
|
{pageNumberText}
|
|
</div>
|
|
);
|
|
}
|