4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T26bc,import { Body, Head as EmailHead, Html, Preview, Link, Section, Row, Column, Img, } from "jsx-email"; import { Fragment } from "react"; import { DefaultFonts } from "@/components/email/font-default"; import { EmailTailwind } from "@/components/email/email-theme"; import type { EmailTheme } from "@/components/email/email-theme"; import { emailAsset } from "@/components/email/email-assets"; import { defaultTheme } from "@/components/email/theme-default"; export type HeaderWithLogoAndMenuVariant = | "menu-right" | "menu-left" | "menu-around" | "stacked-left" | "stacked-center" | "stacked-right"; export interface HeaderMenuLink { href: string; label: string; } export interface HeaderWithLogoAndMenuProps { theme?: EmailTheme; logoSrc?: string; logoAlt?: string; logoHref?: string; links?: HeaderMenuLink[]; pageBackgroundColor?: string; backgroundColor?: string; textColor?: string; variant?: HeaderWithLogoAndMenuVariant; } const fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const responsiveStyles = [ "@media only screen and (max-width: 599px) {", " .header-menu-stack { display: block !important; width: 100% !important; }", " .header-menu-right-links { padding: 24px 0 0 !important; text-align: left !important; }", " .header-menu-right-link { margin-left: 0 !important; margin-right: 24px !important; }", " .header-menu-left-row { display: table !important; width: 100% !important; }", " .header-menu-left-links { display: table-footer-group !important; text-align: right !important; }", " .header-menu-left-logo { display: table-header-group !important; text-align: right !important; }", " .header-menu-left-links-inner { padding-top: 24px !important; }", " .header-menu-around-row { display: table !important; width: 100% !important; }", " .header-menu-around-desktop { display: none !important; }", " .header-menu-around-logo { display: table-header-group !important; width: 100% !important; }", " .header-menu-around-mobile { display: block !important; padding-top: 24px !important; width: 100% !important; }", "}", ].join("\n"); const defaultLinks: HeaderMenuLink[] = [ { href: "https://example.com", label: "Home" }, { href: "https://example.com/about", label: "About us" }, { href: "https://example.com/shop", label: "Shop" }, { href: "https://example.com/faq", label: "FAQs" }, { href: "https://example.com/returns", label: "Returns" }, { href: "https://example.com/contact", label: "Contact us" }, ]; const defaults = { backgroundColor: "#fffffe", links: defaultLinks, logoAlt: "Maizzle", logoHref: "https://example.com", logoSrc: emailAsset("maizzle-insignia.png"), pageBackgroundColor: "#f1f5f9", textColor: "#6b7280", }; type SectionProps = Omit; type ResolvedProps = typeof defaults & SectionProps; const Logo = ({ props }: { props: ResolvedProps }) => ( {props.logoAlt}

); const MenuLinks = ({ links, margin, props, responsiveClassName, }: { links: HeaderMenuLink[]; margin: "left" | "right" | "around"; props: ResolvedProps; responsiveClassName?: string; }) => ( <> {links.map((link, index) => { let marginLeft: string | undefined; let marginRight: string | undefined; if (margin === "left" && index > 0) { marginLeft = "24px"; } if (margin === "right") { marginRight = "24px"; } if (margin === "around") { marginLeft = "12px"; marginRight = "12px"; } return ( {link.label} ); })} ); const MenuRight = ({ props }: { props: ResolvedProps }) => (

); const MenuLeft = ({ props }: { props: ResolvedProps }) => (

); const MenuAround = ({ props }: { props: ResolvedProps }) => (

); const StackedMenu = ({ alignment, props, }: { alignment: "left" | "center" | "right"; props: ResolvedProps; }) => { let margin: "left" | "right" | "around" = "left"; if (alignment === "left") { margin = "right"; } else if (alignment === "center") { margin = "around"; } return (

‍

); }; export const HeaderWithLogoAndMenuSection = (props: SectionProps) => { const variant = props.variant ?? "menu-right"; const resolved = { ...defaults, ...props } as ResolvedProps; let content; if (variant === "menu-left") { content = ; } else if (variant === "menu-around") { content = ; } else if (variant.startsWith("stacked-")) { content = ( ); } else { content = ; } return (

‍

{content}

‍

); }; export const HeaderWithLogoAndMenu = ({ pageBackgroundColor = "#f1f5f9", theme = defaultTheme, variant = "menu-right", ...props }: HeaderWithLogoAndMenuProps) => (