fix: update font registration and usage in DocumentMPR component for improved typography

This commit is contained in:
faisolavolut 2025-03-13 11:55:55 +07:00
parent e0271ca527
commit 16009cab7c
1 changed files with 35 additions and 72 deletions

View File

@ -13,29 +13,30 @@ import get from "lodash.get";
import { dayDate } from "@/lib/utils/date"; import { dayDate } from "@/lib/utils/date";
import { getNumber } from "@/lib/utils/getNumber"; import { getNumber } from "@/lib/utils/getNumber";
Font.register({ Font.register({
family: "Noto Sans SC", family: "NotoSansCJK",
src: `${process.env.NEXT_PUBLIC_BASE_URL}/NotoSerifSC-Regular.ttf`, fonts: [
}); {
Font.register({ src: `${process.env.NEXT_PUBLIC_BASE_URL}/NotoSansSC-Regular.otf`,
family: "roboto", fontWeight: "normal",
src: `${process.env.NEXT_PUBLIC_BASE_URL}/Roboto-Medium.ttf`, },
}); {
Font.register({ src: `${process.env.NEXT_PUBLIC_BASE_URL}/NotoSansSC-Bold.otf`,
family: "roboto-light", fontWeight: "bold",
src: `${process.env.NEXT_PUBLIC_BASE_URL}/Roboto-Light.ttf`, },
],
}); });
// Create styles // Create styles
const styles = StyleSheet.create({ const styles = StyleSheet.create({
chinese: { chinese: {
fontFamily: "Noto Sans SC", // Font Chinese fontFamily: "NotoSansCJK", // Font Chinese
fontSize: 10, fontSize: 10,
}, },
chineseFont: { chineseFont: {
fontFamily: "Noto Sans SC", fontFamily: "NotoSansCJK",
}, },
page: { page: {
padding: 20, padding: 20,
fontFamily: "roboto", fontFamily: "NotoSansCJK",
fontSize: 10, fontSize: 10,
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
@ -429,7 +430,6 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
}} }}
> >
<View <View
@ -450,45 +450,10 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
</Text> </Text>
</View> </View>
<Text> <Text>
: {getNumber(get(data, "male_needs"))} ( Pria{" "} : {getNumber(get(data, "male_needs"))} ( Pria ) dan /atau {" "}
<Text {getNumber(get(data, "female_needs"))} ( Wanita ), atau {" "}
style={{ {getNumber(get(data, "any_gender"))} (Tidak Terbatas )
...styles.chineseFont,
width: 100,
}}
>
{" "}
</Text>{" "}
) dan{" "}
<Text
style={{
...styles.chineseFont,
width: 100,
}}
>
</Text>
/atau{" "}
<Text
style={{
...styles.chineseFont,
width: 100,
}}
>
</Text>{" "}
{getNumber(get(data, "female_needs"))} ( Wanita{" "}
<Text
style={{
...styles.chineseFont,
width: 100,
}}
>
{" "}
</Text>{" "}
)
</Text> </Text>
</View> </View>
<View <View
@ -496,7 +461,6 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
}} }}
> >
<View <View
@ -537,7 +501,6 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
}} }}
> >
<View <View
@ -596,7 +559,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -651,7 +614,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -684,7 +647,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -717,7 +680,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -750,7 +713,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -781,7 +744,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -810,7 +773,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -842,7 +805,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -875,7 +838,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -908,7 +871,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -938,7 +901,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
style={{ style={{
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -966,7 +929,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
style={{ style={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -976,7 +939,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -1008,7 +971,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -1040,7 +1003,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -1072,7 +1035,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -1106,7 +1069,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >
@ -1139,7 +1102,7 @@ const DocumentMPR: FC<any> = ({ data, onRender }) => {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
fontFamily: "roboto-light",
flexWrap: "wrap", flexWrap: "wrap",
}} }}
> >