fix(contact-list): resolves an issue where website label was uneditable

packages/pdf/src/templates/gengar/GengarPage.tsx

@@ -1,11 +1,11 @@
 import type { Style } from "@react-pdf/types";
-import type { IconName } from "phosphor-icons-react-pdf/dynamic";
 import type { TemplatePageProps } from "../../document";
 import type { TemplateColorRoles, TemplateStyleContext, TemplateStyleSlots } from "../shared/types";
 import { Image, Page, StyleSheet, View } from "@react-pdf/renderer";
 import { Fragment, useMemo } from "react";
 import { parseColorString, rgbaStringToHex } from "@reactive-resume/utils/color";
 import { useRender } from "../../context";
+import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
@@ -126,17 +126,20 @@ const Header = ({ styles, colors }: { styles: GengarStyles; colors: TemplateColo
 						<Text style={styles.headerText}>{basics.location}</Text>
 					</View>
 				)}
-				{basics.website.url && (
-					<Link src={basics.website.url} style={styles.contactItem}>
-						<Icon name="globe" color={colors.background} />
-						<Text style={styles.headerText}>{basics.website.label}</Text>
-					</Link>
-				)}
+				<WebsiteContactItem
+					website={basics.website}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
 				{basics.customFields.map((field) => (
-					<Link key={field.id} src={field.link} style={styles.contactItem}>
-						<Icon name={field.icon as IconName} color={colors.background} />
-						<Text style={styles.headerText}>{field.text}</Text>
-					</Link>
+					<CustomFieldContactItem
+						key={field.id}
+						field={field}
+						style={styles.contactItem}
+						textStyle={styles.headerText}
+						iconColor={colors.background}
+					/>
 				))}
 			</View>
 		</View>