YaltopiaTech/Yaltopia-Hotel-Emails
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve contact section

Browse Source 
Made-with: Cursor
This commit is contained in:
“kirukib” 2026-04-02 11:33:40 +03:00
parent b52c4dffdf
commit 70fe418345
1 changed files with 64 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/email/EmailShell.tsx
View File

@ -48,6 +48,17 @@ function IconPhone() {
)
}
function IconMapPin() {
return (
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={{ display: 'block' }}>
<path
fill="currentColor"
d="M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"
/>
</svg>
)
}
function telHref(phone: string) {
// Remove spaces and dashes so tel links work reliably across clients.
const cleaned = phone.replace(/[\\s-]/g, '')
@ -56,15 +67,17 @@ function telHref(phone: string) {
function ContactLine({
icon,
iconColor,
children,
}: {
icon: ReactNode
iconColor: string
children: ReactNode
}) {
return (
<Row style={{ margin: '0 0 8px' }}>
<Column style={{ width: 24, paddingRight: 8, verticalAlign: 'top' }}>
<Text style={{ margin: 0, color: 'inherit', display: 'block' }}>{icon}</Text>
<Column style={{ width: 24, paddingRight: 10, verticalAlign: 'top' }}>
<Text style={{ margin: 0, color: iconColor, display: 'block' }}>{icon}</Text>
</Column>
<Column style={{ width: 'auto', verticalAlign: 'top' }}>{children}</Column>
</Row>
@ -113,42 +126,58 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
backgroundColor: 'rgba(255,255,255,0.55)',
}}
>
{brand.footer.address ? (
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
{brand.footer.address}
</Text>
) : null}
<Text style={{ margin: '0 0 10px', color: brand.textColor, fontSize: 12, fontWeight: 700, lineHeight: '18px' }}>
Contact
</Text>
{brand.footer.email ? (
<ContactLine icon={<IconMail />}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
<Link
href={`mailto:${brand.footer.email}`}
style={{ color: brand.primaryColor, textDecoration: 'none' }}
>
{brand.footer.email}
</Link>
</Text>
</ContactLine>
) : null}
<Row>
<Column style={{ width: '50%', verticalAlign: 'top', paddingRight: 8 }}>
{brand.footer.address ? (
<ContactLine icon={<IconMapPin />} iconColor={brand.primaryColor}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
{brand.footer.address}
</Text>
</ContactLine>
) : null}
</Column>
{brand.footer.phone1 || brand.footer.phone2 ? (
<ContactLine icon={<IconPhone />}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
{brand.footer.phone1 ? (
<Link href={telHref(brand.footer.phone1)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
{brand.footer.phone1}
<Column style={{ width: '50%', verticalAlign: 'top', paddingLeft: 8 }}>
{brand.footer.email ? (
<ContactLine icon={<IconMail />} iconColor={brand.primaryColor}>
<Link
href={`mailto:${brand.footer.email}`}
style={{ color: brand.primaryColor, textDecoration: 'none', fontSize: 12, lineHeight: '18px', fontWeight: 600 }}
>
{brand.footer.email}
</Link>
) : null}
{brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
{brand.footer.phone2 ? (
<Link href={telHref(brand.footer.phone2)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
{brand.footer.phone2}
</Link>
) : null}
</Text>
</ContactLine>
) : null}
</ContactLine>
) : null}
{brand.footer.phone1 || brand.footer.phone2 ? (
<ContactLine icon={<IconPhone />} iconColor={brand.primaryColor}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
{brand.footer.phone1 ? (
<Link
href={telHref(brand.footer.phone1)}
style={{ color: brand.primaryColor, textDecoration: 'none', fontWeight: 600 }}
>
{brand.footer.phone1}
</Link>
) : null}
{brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
{brand.footer.phone2 ? (
<Link
href={telHref(brand.footer.phone2)}
style={{ color: brand.primaryColor, textDecoration: 'none', fontWeight: 600 }}
>
{brand.footer.phone2}
</Link>
) : null}
</Text>
</ContactLine>
) : null}
</Column>
</Row>
</Section>
<Section style={{ margin: '14px 0 0', padding: 0 }}>