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

structured contact footer

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

86
src/email/EmailShell.tsx
View File

@ -11,6 +11,8 @@ import {
Img,
Preview,
Link,
Row,
Column,
} from '@react-email/components'
import type { Brand } from './types'
@ -24,6 +26,45 @@ type EmailShellProps = {
const DEFAULT_LOGO_PLACEHOLDER =
'https://dummyimage.com/120x40/0f172a/ffffff&text=Shitaye'
function IconMail() {
return (
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<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"
/>
</svg>
)
}
function IconPhone() {
return (
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<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"
/>
</svg>
)
}
function ContactLine({
icon,
children,
}: {
icon: ReactNode
children: ReactNode
}) {
return (
<Row style={{ margin: '0 0 8px' }}>
<Column style={{ width: 24, paddingRight: 8 }}>
<Text style={{ margin: 0, color: 'inherit', display: 'block' }}>{icon}</Text>
</Column>
<Column style={{ width: 'auto' }}>{children}</Column>
</Row>
)
}
export function EmailShell({ brand, title, previewText, children }: EmailShellProps) {
const logoUrl = brand.logoUrl?.trim() ? brand.logoUrl.trim() : DEFAULT_LOGO_PLACEHOLDER
@ -58,16 +99,43 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
<Hr style={{ borderColor: brand.secondaryColor, opacity: 0.2 }} />
<Section style={{ padding: '18px 0 28px' }}>
<Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
{brand.footer.address ? `${brand.footer.address} ` : ''}
{brand.footer.email ? `\u2709 ${brand.footer.email}` : ''}
</Text>
<Section
style={{
border: `1px solid ${brand.secondaryColor}`,
borderRadius: 12,
padding: 14,
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: '10px 0 0', color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
{brand.footer.phone1 ? `\u260E ${brand.footer.phone1}` : ''}
{brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
{brand.footer.phone2 ? brand.footer.phone2 : ''}
</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}
{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 && brand.footer.phone2 ? ' · ' : ''}
{brand.footer.phone2 ? brand.footer.phone2 : ''}
</Text>
</ContactLine>
) : null}
</Section>
<Section style={{ margin: '14px 0 0', padding: 0 }}>
<Text style={{ margin: '0 0 8px', color: brand.textColor, fontSize: 12, opacity: 0.85, lineHeight: '18px' }}>