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
This commit is contained in:
Amruth Pillai
2026-07-04 20:04:37 +02:00
parent cf738b9306
commit 0701f3b62a
16 changed files with 272 additions and 304 deletions
@@ -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}