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

link phone + align contact rows

Browse Source 
Made-with: Cursor
This commit is contained in:
“kirukib” 2026-04-02 11:31:48 +03:00
parent 1e383b5ba8
commit b52c4dffdf
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/email/EmailShell.tsx
View File

@ -28,7 +28,7 @@ const DEFAULT_LOGO_PLACEHOLDER =
function IconMail() { function IconMail() {
return ( return (
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={{ display: 'block' }}>
<path <path
fill="currentColor" fill="currentColor"
d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"
@ -39,7 +39,7 @@ function IconMail() {
function IconPhone() { function IconPhone() {
return ( return (
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={{ display: 'block' }}>
<path <path
fill="currentColor" fill="currentColor"
d="M6.6 10.8c1.5 2.9 3.9 5.3 6.8 6.8l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.6 0 1 .4 1 1V21c0 .6-.4 1-1 1C10.1 22 2 13.9 2 4c0-.6.4-1 1-1h3.9c.6 0 1 .4 1 1 0 1.4.2 2.8.7 4.1.1.4 0 .9-.2 1.2L6.6 10.8z" d="M6.6 10.8c1.5 2.9 3.9 5.3 6.8 6.8l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.4 2.7.7 4.1.7.6 0 1 .4 1 1V21c0 .6-.4 1-1 1C10.1 22 2 13.9 2 4c0-.6.4-1 1-1h3.9c.6 0 1 .4 1 1 0 1.4.2 2.8.7 4.1.1.4 0 .9-.2 1.2L6.6 10.8z"
@ -48,6 +48,12 @@ function IconPhone() {
) )
} }
function telHref(phone: string) {
// Remove spaces and dashes so tel links work reliably across clients.
const cleaned = phone.replace(/[\\s-]/g, '')
return `tel:${cleaned}`
}
function ContactLine({ function ContactLine({
icon, icon,
children, children,
@ -57,10 +63,10 @@ function ContactLine({
}) { }) {
return ( return (
<Row style={{ margin: '0 0 8px' }}> <Row style={{ margin: '0 0 8px' }}>
<Column style={{ width: 24, paddingRight: 8 }}> <Column style={{ width: 24, paddingRight: 8, verticalAlign: 'top' }}>
<Text style={{ margin: 0, color: 'inherit', display: 'block' }}>{icon}</Text> <Text style={{ margin: 0, color: 'inherit', display: 'block' }}>{icon}</Text>
</Column> </Column>
<Column style={{ width: 'auto' }}>{children}</Column> <Column style={{ width: 'auto', verticalAlign: 'top' }}>{children}</Column>
</Row> </Row>
) )
} }
@ -129,9 +135,17 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
{brand.footer.phone1 || brand.footer.phone2 ? ( {brand.footer.phone1 || brand.footer.phone2 ? (
<ContactLine icon={<IconPhone />}> <ContactLine icon={<IconPhone />}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}> <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
{brand.footer.phone1 ? brand.footer.phone1 : ''} {brand.footer.phone1 ? (
<Link href={telHref(brand.footer.phone1)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
{brand.footer.phone1}
</Link>
) : null}
{brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''} {brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
{brand.footer.phone2 ? brand.footer.phone2 : ''} {brand.footer.phone2 ? (
<Link href={telHref(brand.footer.phone2)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
{brand.footer.phone2}
</Link>
) : null}
</Text> </Text>
</ContactLine> </ContactLine>
) : null} ) : null}