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,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} />