refactor(pdf): extract EmailContactItem/PhoneContactItem/LocationContactItem

Add three shared contact-item components to packages/pdf/src/templates/shared/
contact-item.tsx alongside the existing WebsiteContactItem and CustomFieldContactItem.
Replace ~18 lines of inline email/phone/location JSX in all 15 template headers
with the shared components (EmailContactItem accepts an optional iconName prop
for ditgar's "at" variant; rhyhorn's array-push pattern also updated).

Claude-Session: https://claude.ai/code/session_012Bnvt1MghwHj4qQRxuQUGa

packages/pdf/src/templates/azurill/AzurillPage.tsx

@@ -11,13 +11,19 @@ import { Fragment, useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
@@ -108,24 +114,9 @@ const Header = ({ styles }: AzurillHeaderProps) => {
 			</View>
 
 			<View style={styles.headerContactRow}>
-				{basics.email && (
-					<Link src={`mailto:${basics.email}`} style={styles.headerContactItem}>
-						<Icon name="envelope" />
-						<Text>{basics.email}</Text>
-					</Link>
-				)}
-				{basics.phone && (
-					<Link src={`tel:${basics.phone}`} style={styles.headerContactItem}>
-						<Icon name="phone" />
-						<Text>{basics.phone}</Text>
-					</Link>
-				)}
-				{basics.location && (
-					<View style={styles.headerContactItem}>
-						<Icon name="map-pin" />
-						<Text>{basics.location}</Text>
-					</View>
-				)}
+				<EmailContactItem email={basics.email} style={styles.headerContactItem} />
+				<PhoneContactItem phone={basics.phone} style={styles.headerContactItem} />
+				<LocationContactItem location={basics.location} style={styles.headerContactItem} />
 				<WebsiteContactItem website={basics.website} style={styles.headerContactItem} />
 				{basics.customFields.map((field) => (
 					<CustomFieldContactItem key={field.id} field={field} style={styles.headerContactItem} />

packages/pdf/src/templates/bronzor/BronzorPage.tsx

@@ -5,13 +5,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -105,24 +111,9 @@ const Header = ({ styles }: BronzorHeaderProps) => {
 			</View>
 
 			<View style={styles.headerContactRow}>
-				{basics.email && (
-					<Link src={`mailto:${basics.email}`} style={styles.headerContactItem}>
-						<Icon name="envelope" />
-						<Text>{basics.email}</Text>
-					</Link>
-				)}
-				{basics.phone && (
-					<Link src={`tel:${basics.phone}`} style={styles.headerContactItem}>
-						<Icon name="phone" />
-						<Text>{basics.phone}</Text>
-					</Link>
-				)}
-				{basics.location && (
-					<View style={styles.headerContactItem}>
-						<Icon name="map-pin" />
-						<Text>{basics.location}</Text>
-					</View>
-				)}
+				<EmailContactItem email={basics.email} style={styles.headerContactItem} />
+				<PhoneContactItem phone={basics.phone} style={styles.headerContactItem} />
+				<LocationContactItem location={basics.location} style={styles.headerContactItem} />
 				<WebsiteContactItem website={basics.website} style={styles.headerContactItem} />
 				{basics.customFields.map((field) => (
 					<CustomFieldContactItem key={field.id} field={field} style={styles.headerContactItem} />

packages/pdf/src/templates/chikorita/ChikoritaPage.tsx

@@ -5,13 +5,19 @@ import { Fragment, useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
@@ -111,24 +117,9 @@ const Header = ({ styles }: ChikoritaHeaderProps) => {
 
 				<View style={styles.headerContactList}>
 					<View style={styles.headerContactRow}>
-						{basics.email && (
-							<Link src={`mailto:${basics.email}`} style={styles.headerContactItem}>
-								<Icon name="envelope" />
-								<Text>{basics.email}</Text>
-							</Link>
-						)}
-						{basics.phone && (
-							<Link src={`tel:${basics.phone}`} style={styles.headerContactItem}>
-								<Icon name="phone" />
-								<Text>{basics.phone}</Text>
-							</Link>
-						)}
-						{basics.location && (
-							<View style={styles.headerContactItem}>
-								<Icon name="map-pin" />
-								<Text>{basics.location}</Text>
-							</View>
-						)}
+						<EmailContactItem email={basics.email} style={styles.headerContactItem} />
+						<PhoneContactItem phone={basics.phone} style={styles.headerContactItem} />
+						<LocationContactItem location={basics.location} style={styles.headerContactItem} />
 					</View>
 
 					<View style={styles.headerContactRow}>

packages/pdf/src/templates/ditgar/DitgarPage.tsx

@@ -6,14 +6,20 @@ import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
 import { getPrimaryTint } from "../shared/color-helpers";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { getFeaturedSummaryLayout } from "../shared/featured-summary";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
@@ -124,24 +130,25 @@ const Header = ({ styles, colors }: DitgarHeaderProps) => {
 			</View>
 
 			<View style={styles.contactList}>
-				{basics.email && (
-					<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-						<Icon name="at" color={colors.background} />
-						<Text style={styles.headerText}>{basics.email}</Text>
-					</Link>
-				)}
-				{basics.phone && (
-					<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-						<Icon name="phone" color={colors.background} />
-						<Text style={styles.headerText}>{basics.phone}</Text>
-					</Link>
-				)}
-				{basics.location && (
-					<View style={styles.contactItem}>
-						<Icon name="map-pin" color={colors.background} />
-						<Text style={styles.headerText}>{basics.location}</Text>
-					</View>
-				)}
+				<EmailContactItem
+					email={basics.email}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+					iconName="at"
+				/>
+				<PhoneContactItem
+					phone={basics.phone}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
+				<LocationContactItem
+					location={basics.location}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
 				<WebsiteContactItem
 					website={basics.website}
 					style={styles.contactItem}

packages/pdf/src/templates/ditto/DittoPage.tsx

@@ -5,13 +5,19 @@ import { Fragment, useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -116,24 +122,9 @@ const Header = ({ styles }: DittoHeaderProps) => {
 				<View style={styles.contactOffset} />
 
 				<View style={styles.contactList}>
-					{basics.email && (
-						<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-							<Icon name="envelope" />
-							<Text>{basics.email}</Text>
-						</Link>
-					)}
-					{basics.phone && (
-						<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-							<Icon name="phone" />
-							<Text>{basics.phone}</Text>
-						</Link>
-					)}
-					{basics.location && (
-						<View style={styles.contactItem}>
-							<Icon name="map-pin" />
-							<Text>{basics.location}</Text>
-						</View>
-					)}
+					<EmailContactItem email={basics.email} style={styles.contactItem} />
+					<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
+					<LocationContactItem location={basics.location} style={styles.contactItem} />
 					<WebsiteContactItem website={basics.website} style={styles.contactItem} />
 					{basics.customFields.map((field) => (
 						<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />

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

@@ -6,14 +6,20 @@ import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
 import { getPrimaryTint } from "../shared/color-helpers";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { getFeaturedSummaryLayout } from "../shared/featured-summary";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
@@ -121,24 +127,24 @@ const Header = ({ styles, colors }: GengarHeaderProps) => {
 			</View>
 
 			<View style={styles.contactList}>
-				{basics.email && (
-					<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-						<Icon name="envelope" color={colors.background} />
-						<Text style={styles.headerText}>{basics.email}</Text>
-					</Link>
-				)}
-				{basics.phone && (
-					<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-						<Icon name="phone" color={colors.background} />
-						<Text style={styles.headerText}>{basics.phone}</Text>
-					</Link>
-				)}
-				{basics.location && (
-					<View style={styles.contactItem}>
-						<Icon name="map-pin" color={colors.background} />
-						<Text style={styles.headerText}>{basics.location}</Text>
-					</View>
-				)}
+				<EmailContactItem
+					email={basics.email}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
+				<PhoneContactItem
+					phone={basics.phone}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
+				<LocationContactItem
+					location={basics.location}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
 				<WebsiteContactItem
 					website={basics.website}
 					style={styles.contactItem}

packages/pdf/src/templates/glalie/GlaliePage.tsx

@@ -6,13 +6,19 @@ import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
 import { getPrimaryTint } from "../shared/color-helpers";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
@@ -112,24 +118,9 @@ const Header = ({ styles }: GlalieHeaderProps) => {
 			</View>
 
 			<View style={styles.contactList}>
-				{basics.email && (
-					<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-						<Icon name="envelope" />
-						<Text>{basics.email}</Text>
-					</Link>
-				)}
-				{basics.phone && (
-					<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-						<Icon name="phone" />
-						<Text>{basics.phone}</Text>
-					</Link>
-				)}
-				{basics.location && (
-					<View style={styles.contactItem}>
-						<Icon name="map-pin" />
-						<Text>{basics.location}</Text>
-					</View>
-				)}
+				<EmailContactItem email={basics.email} style={styles.contactItem} />
+				<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
+				<LocationContactItem location={basics.location} style={styles.contactItem} />
 				<WebsiteContactItem website={basics.website} style={styles.contactItem} />
 				{basics.customFields.map((field) => (
 					<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />

packages/pdf/src/templates/kakuna/KakunaPage.tsx

@@ -5,13 +5,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -87,24 +93,9 @@ const Header = ({ styles }: KakunaHeaderProps) => {
 				</View>
 
 				<View style={styles.contactList}>
-					{basics.email && (
-						<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-							<Icon name="envelope" />
-							<Text>{basics.email}</Text>
-						</Link>
-					)}
-					{basics.phone && (
-						<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-							<Icon name="phone" />
-							<Text>{basics.phone}</Text>
-						</Link>
-					)}
-					{basics.location && (
-						<View style={styles.contactItem}>
-							<Icon name="map-pin" />
-							<Text>{basics.location}</Text>
-						</View>
-					)}
+					<EmailContactItem email={basics.email} style={styles.contactItem} />
+					<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
+					<LocationContactItem location={basics.location} style={styles.contactItem} />
 					<WebsiteContactItem website={basics.website} style={styles.contactItem} />
 					{basics.customFields.map((field) => (
 						<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />

packages/pdf/src/templates/lapras/LaprasPage.tsx

@@ -5,13 +5,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -86,24 +92,9 @@ const Header = ({ styles }: LaprasHeaderProps) => {
 				</View>
 
 				<View style={styles.contactList}>
-					{basics.email && (
-						<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-							<Icon name="envelope" />
-							<Text>{basics.email}</Text>
-						</Link>
-					)}
-					{basics.phone && (
-						<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-							<Icon name="phone" />
-							<Text>{basics.phone}</Text>
-						</Link>
-					)}
-					{basics.location && (
-						<View style={styles.contactItem}>
-							<Icon name="map-pin" />
-							<Text>{basics.location}</Text>
-						</View>
-					)}
+					<EmailContactItem email={basics.email} style={styles.contactItem} />
+					<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
+					<LocationContactItem location={basics.location} style={styles.contactItem} />
 					<WebsiteContactItem website={basics.website} style={styles.contactItem} />
 					{basics.customFields.map((field) => (
 						<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />

packages/pdf/src/templates/leafish/LeafishPage.tsx

@@ -6,13 +6,19 @@ import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
 import { getPrimaryTint as getPrimaryAlpha } from "../shared/color-helpers";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -107,24 +113,9 @@ const Header = ({ styles }: LeafishHeaderProps) => {
 
 			<View style={styles.headerContactBand}>
 				<View style={styles.contactList}>
-					{basics.email && (
-						<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-							<Icon name="envelope" />
-							<Text>{basics.email}</Text>
-						</Link>
-					)}
-					{basics.phone && (
-						<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-							<Icon name="phone" />
-							<Text>{basics.phone}</Text>
-						</Link>
-					)}
-					{basics.location && (
-						<View style={styles.contactItem}>
-							<Icon name="map-pin" />
-							<Text>{basics.location}</Text>
-						</View>
-					)}
+					<EmailContactItem email={basics.email} style={styles.contactItem} />
+					<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
+					<LocationContactItem location={basics.location} style={styles.contactItem} />
 					<WebsiteContactItem website={basics.website} style={styles.contactItem} />
 					{basics.customFields.map((field) => (
 						<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />

packages/pdf/src/templates/meowth/MeowthPage.tsx

@@ -5,13 +5,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -89,24 +95,9 @@ const Header = ({ styles }: MeowthHeaderProps) => {
 				</View>
 
 				<View style={styles.contactList}>
-					{basics.email && (
-						<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-							<Icon name="envelope" />
-							<Text>{basics.email}</Text>
-						</Link>
-					)}
-					{basics.phone && (
-						<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-							<Icon name="phone" />
-							<Text>{basics.phone}</Text>
-						</Link>
-					)}
-					{basics.location && (
-						<View style={styles.contactItem}>
-							<Icon name="map-pin" />
-							<Text>{basics.location}</Text>
-						</View>
-					)}
+					<EmailContactItem email={basics.email} style={styles.contactItem} />
+					<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
+					<LocationContactItem location={basics.location} style={styles.contactItem} />
 					<WebsiteContactItem website={basics.website} style={styles.contactItem} />
 					{basics.customFields.map((field) => (
 						<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />

packages/pdf/src/templates/onyx/OnyxPage.tsx

@@ -5,13 +5,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -86,24 +92,9 @@ const Header = ({ styles }: OnyxHeaderProps) => {
 				</View>
 
 				<View style={styles.contactList}>
-					{basics.email && (
-						<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-							<Icon name="envelope" />
-							<Text>{basics.email}</Text>
-						</Link>
-					)}
-					{basics.phone && (
-						<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-							<Icon name="phone" />
-							<Text>{basics.phone}</Text>
-						</Link>
-					)}
-					{basics.location && (
-						<View style={styles.contactItem}>
-							<Icon name="map-pin" />
-							<Text>{basics.location}</Text>
-						</View>
-					)}
+					<EmailContactItem email={basics.email} style={styles.contactItem} />
+					<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
+					<LocationContactItem location={basics.location} style={styles.contactItem} />
 					<WebsiteContactItem website={basics.website} style={styles.contactItem} />
 					{basics.customFields.map((field) => (
 						<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />

packages/pdf/src/templates/pikachu/PikachuPage.tsx

@@ -5,13 +5,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight, resolvePlacementColor } from "../shared/styles";
@@ -114,24 +120,24 @@ const Header = ({ styles, colors }: PikachuHeaderProps) => {
 			</View>
 
 			<View style={styles.contactList}>
-				{basics.email && (
-					<Link src={`mailto:${basics.email}`} style={styles.contactItem}>
-						<Icon name="envelope" color={colors.background} />
-						<Text style={styles.headerText}>{basics.email}</Text>
-					</Link>
-				)}
-				{basics.phone && (
-					<Link src={`tel:${basics.phone}`} style={styles.contactItem}>
-						<Icon name="phone" color={colors.background} />
-						<Text style={styles.headerText}>{basics.phone}</Text>
-					</Link>
-				)}
-				{basics.location && (
-					<View style={styles.contactItem}>
-						<Icon name="map-pin" color={colors.background} />
-						<Text style={styles.headerText}>{basics.location}</Text>
-					</View>
-				)}
+				<EmailContactItem
+					email={basics.email}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
+				<PhoneContactItem
+					phone={basics.phone}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
+				<LocationContactItem
+					location={basics.location}
+					style={styles.contactItem}
+					textStyle={styles.headerText}
+					iconColor={colors.background}
+				/>
 				<WebsiteContactItem
 					website={basics.website}
 					style={styles.contactItem}

packages/pdf/src/templates/rhyhorn/RhyhornPage.tsx

@@ -6,13 +6,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -85,36 +91,19 @@ const Header = ({ styles }: RhyhornHeaderProps) => {
 	if (basics.email) {
 		contactItems.push({
 			id: "email",
-			content: (
-				<Link src={`mailto:${basics.email}`} style={styles.contactItemContent}>
-					<Icon name="envelope" />
-					<Text>{basics.email}</Text>
-				</Link>
-			),
+			content: <EmailContactItem email={basics.email} style={styles.contactItemContent} />,
 		});
 	}
-
 	if (basics.phone) {
 		contactItems.push({
 			id: "phone",
-			content: (
-				<Link src={`tel:${basics.phone}`} style={styles.contactItemContent}>
-					<Icon name="phone" />
-					<Text>{basics.phone}</Text>
-				</Link>
-			),
+			content: <PhoneContactItem phone={basics.phone} style={styles.contactItemContent} />,
 		});
 	}
-
 	if (basics.location) {
 		contactItems.push({
 			id: "location",
-			content: (
-				<View style={styles.contactItemContent}>
-					<Icon name="map-pin" />
-					<Text>{basics.location}</Text>
-				</View>
-			),
+			content: <LocationContactItem location={basics.location} style={styles.contactItemContent} />,
 		});
 	}
 

packages/pdf/src/templates/scizor/ScizorPage.tsx

@@ -5,13 +5,19 @@ import { useMemo } from "react";
 import { rgbaStringToHex } from "@reactive-resume/utils/color";
 import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
 import { useRender } from "../../context";
-import { CustomFieldContactItem, WebsiteContactItem } from "../shared/contact-item";
+import {
+	CustomFieldContactItem,
+	EmailContactItem,
+	LocationContactItem,
+	PhoneContactItem,
+	WebsiteContactItem,
+} from "../shared/contact-item";
 import { TemplateProvider } from "../shared/context";
 import { filterSections } from "../shared/filtering";
 import { getTemplateMetrics } from "../shared/metrics";
 import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
 import { hasTemplatePicture } from "../shared/picture";
-import { Heading, Icon, Link, Text } from "../shared/primitives";
+import { Heading, Text } from "../shared/primitives";
 import { createRtlStyleHelpers } from "../shared/rtl";
 import { Section } from "../shared/sections";
 import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -77,24 +83,9 @@ const Header = ({ styles }: ScizorHeaderProps) => {
 				{basics.headline && <Text style={styles.headerHeadline}>{basics.headline}</Text>}
 
 				<View style={styles.headerContactRow}>
-					{basics.location && (
-						<View style={styles.headerContactItem}>
-							<Icon name="map-pin" />
-							<Text>{basics.location}</Text>
-						</View>
-					)}
-					{basics.email && (
-						<Link src={`mailto:${basics.email}`} style={styles.headerContactItem}>
-							<Icon name="envelope" />
-							<Text>{basics.email}</Text>
-						</Link>
-					)}
-					{basics.phone && (
-						<Link src={`tel:${basics.phone}`} style={styles.headerContactItem}>
-							<Icon name="phone" />
-							<Text>{basics.phone}</Text>
-						</Link>
-					)}
+					<LocationContactItem location={basics.location} style={styles.headerContactItem} />
+					<EmailContactItem email={basics.email} style={styles.headerContactItem} />
+					<PhoneContactItem phone={basics.phone} style={styles.headerContactItem} />
 					<WebsiteContactItem website={basics.website} style={styles.headerContactItem} />
 					{basics.customFields.map((field) => (
 						<CustomFieldContactItem key={field.id} field={field} style={styles.headerContactItem} />

packages/pdf/src/templates/shared/contact-item.tsx

@@ -5,13 +5,13 @@ import { View } from "#react-pdf-renderer";
 import { getCustomFieldLinkUrl, getWebsiteDisplayText } from "./contact";
 import { Icon, Link, Text } from "./primitives";
 
+type ContactStyle = Style | Style[];
+
 type WebsiteDisplay = {
 	url: string;
 	label?: string | undefined;
 };
 
-type ContactStyle = Style | Style[];
-
 type WebsiteContactItemProps = {
 	website: WebsiteDisplay;
 	style?: ContactStyle;
@@ -56,3 +56,62 @@ export const CustomFieldContactItem = ({ field, style, textStyle, iconColor }: C
 
 	return <View {...(style ? { style } : {})}>{children}</View>;
 };
+
+type EmailContactItemProps = {
+	email: string;
+	style?: ContactStyle;
+	textStyle?: ContactStyle;
+	iconColor?: string;
+	/** Override icon; defaults to "envelope". ditgar uses "at". */
+	iconName?: IconName;
+};
+
+export const EmailContactItem = ({
+	email,
+	style,
+	textStyle,
+	iconColor,
+	iconName = "envelope",
+}: EmailContactItemProps) => {
+	if (!email) return null;
+	return (
+		<Link src={`mailto:${email}`} {...(style ? { style } : {})}>
+			<Icon name={iconName} {...(iconColor ? { color: iconColor } : {})} />
+			<Text {...(textStyle ? { style: textStyle } : {})}>{email}</Text>
+		</Link>
+	);
+};
+
+type PhoneContactItemProps = {
+	phone: string;
+	style?: ContactStyle;
+	textStyle?: ContactStyle;
+	iconColor?: string;
+};
+
+export const PhoneContactItem = ({ phone, style, textStyle, iconColor }: PhoneContactItemProps) => {
+	if (!phone) return null;
+	return (
+		<Link src={`tel:${phone}`} {...(style ? { style } : {})}>
+			<Icon name="phone" {...(iconColor ? { color: iconColor } : {})} />
+			<Text {...(textStyle ? { style: textStyle } : {})}>{phone}</Text>
+		</Link>
+	);
+};
+
+type LocationContactItemProps = {
+	location: string;
+	style?: ContactStyle;
+	textStyle?: ContactStyle;
+	iconColor?: string;
+};
+
+export const LocationContactItem = ({ location, style, textStyle, iconColor }: LocationContactItemProps) => {
+	if (!location) return null;
+	return (
+		<View {...(style ? { style } : {})}>
+			<Icon name="map-pin" {...(iconColor ? { color: iconColor } : {})} />
+			<Text {...(textStyle ? { style: textStyle } : {})}>{location}</Text>
+		</View>
+	);
+};