structured contact footer

Made-with: Cursor

src/email/EmailShell.tsx

@@ -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' }}>
+            <Section
-              {brand.footer.address ? `${brand.footer.address} ` : ''}
+              style={{
-              {brand.footer.email ? `\u2709 ${brand.footer.email}` : ''}
+                border: `1px solid ${brand.secondaryColor}`,
-            </Text>
+                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.email ? (
-              {brand.footer.phone1 ? `\u260E ${brand.footer.phone1}` : ''}
+                <ContactLine icon={<IconMail />}>
-              {brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
+                  <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
-              {brand.footer.phone2 ? brand.footer.phone2 : ''}
+                    <Link
-            </Text>
+                      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' }}>