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) { function telHref(phone: string) {
// Remove spaces and dashes so tel links work reliably across clients. // Remove spaces and dashes so tel links work reliably across clients.
const cleaned = phone.replace(/[\\s-]/g, '') const cleaned = phone.replace(/[\\s-]/g, '')
@ -56,15 +67,17 @@ function telHref(phone: string) {
function ContactLine({ function ContactLine({
icon, icon,
iconColor,
children, children,
}: { }: {
icon: ReactNode icon: ReactNode
iconColor: string
children: ReactNode children: ReactNode
}) { }) {
return ( return (
<Row style={{ margin: '0 0 8px' }}> <Row style={{ margin: '0 0 8px' }}>
<Column style={{ width: 24, paddingRight: 8, verticalAlign: 'top' }}> <Column style={{ width: 24, paddingRight: 10, verticalAlign: 'top' }}>
<Text style={{ margin: 0, color: 'inherit', display: 'block' }}>{icon}</Text> <Text style={{ margin: 0, color: iconColor, display: 'block' }}>{icon}</Text>
</Column> </Column>
<Column style={{ width: 'auto', verticalAlign: 'top' }}>{children}</Column> <Column style={{ width: 'auto', verticalAlign: 'top' }}>{children}</Column>
</Row> </Row>
@ -113,42 +126,58 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
backgroundColor: 'rgba(255,255,255,0.55)', backgroundColor: 'rgba(255,255,255,0.55)',
}} }}
> >
{brand.footer.address ? ( <Text style={{ margin: '0 0 10px', color: brand.textColor, fontSize: 12, fontWeight: 700, lineHeight: '18px' }}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}> Contact
{brand.footer.address} </Text>
</Text>
) : null}
{brand.footer.email ? ( <Row>
<ContactLine icon={<IconMail />}> <Column style={{ width: '50%', verticalAlign: 'top', paddingRight: 8 }}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}> {brand.footer.address ? (
<Link <ContactLine icon={<IconMapPin />} iconColor={brand.primaryColor}>
href={`mailto:${brand.footer.email}`} <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
style={{ color: brand.primaryColor, textDecoration: 'none' }} {brand.footer.address}
> </Text>
{brand.footer.email} </ContactLine>
</Link> ) : null}
</Text> </Column>
</ContactLine>
) : null}
{brand.footer.phone1 || brand.footer.phone2 ? ( <Column style={{ width: '50%', verticalAlign: 'top', paddingLeft: 8 }}>
<ContactLine icon={<IconPhone />}> {brand.footer.email ? (
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}> <ContactLine icon={<IconMail />} iconColor={brand.primaryColor}>
{brand.footer.phone1 ? ( <Link
<Link href={telHref(brand.footer.phone1)} style={{ color: brand.primaryColor, textDecoration: 'none' }}> href={`mailto:${brand.footer.email}`}
{brand.footer.phone1} style={{ color: brand.primaryColor, textDecoration: 'none', fontSize: 12, lineHeight: '18px', fontWeight: 600 }}
>
{brand.footer.email}
</Link> </Link>
) : null} </ContactLine>
{brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''} ) : null}
{brand.footer.phone2 ? (
<Link href={telHref(brand.footer.phone2)} style={{ color: brand.primaryColor, textDecoration: 'none' }}> {brand.footer.phone1 || brand.footer.phone2 ? (
{brand.footer.phone2} <ContactLine icon={<IconPhone />} iconColor={brand.primaryColor}>
</Link> <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
) : null} {brand.footer.phone1 ? (
</Text> <Link
</ContactLine> href={telHref(brand.footer.phone1)}
) : null} 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>
<Section style={{ margin: '14px 0 0', padding: 0 }}> <Section style={{ margin: '14px 0 0', padding: 0 }}>