ERP-node/frontend/components/report/designer/properties/PageNumberProperties.tsx

45 lines
1.5 KiB
TypeScript

"use client";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Hash } from "lucide-react";
import { useReportDesigner } from "@/contexts/ReportDesignerContext";
import type { ComponentConfig } from "@/types/report";
interface Props {
component: ComponentConfig;
}
export function PageNumberProperties({ component }: Props) {
const { updateComponent } = useReportDesigner();
return (
<div className="mt-4 space-y-3 rounded-xl border border-purple-200 bg-purple-50/50 p-4">
<div className="flex items-center gap-2 text-sm font-semibold text-purple-700">
<Hash className="h-4 w-4" />
</div>
<div>
<Label className="text-xs"> </Label>
<Select
value={component.pageNumberFormat || "number"}
onValueChange={(value) =>
updateComponent(component.id, {
pageNumberFormat: value as "number" | "numberTotal" | "koreanNumber",
})
}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="number"> (1, 2, 3...)</SelectItem>
<SelectItem value="numberTotal">/ (1 / 3)</SelectItem>
<SelectItem value="koreanNumber"> (1 )</SelectItem>
</SelectContent>
</Select>
</div>
</div>
);
}