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() {
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
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"
@ -39,7 +39,7 @@ function IconMail() {
function IconPhone() {
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
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"
@ -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({
icon,
children,
@ -57,10 +63,10 @@ function ContactLine({
}) {
return (
<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>
</Column>
<Column style={{ width: 'auto' }}>{children}</Column>
<Column style={{ width: 'auto', verticalAlign: 'top' }}>{children}</Column>
</Row>
)
}
@ -129,9 +135,17 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
{brand.footer.phone1 || brand.footer.phone2 ? (
<ContactLine icon={<IconPhone />}>
<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.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>
</ContactLine>
) : null}