responsive-react-email
Version:
A utility for writing responsive email templates with react-email
1 lines • 1.97 kB
Source Map (JSON)
{"version":3,"sources":["../src/dual-column/dual-column.tsx"],"sourcesContent":["import { Section } from \"@react-email/section\";\nimport React from \"react\";\nimport { twoColumnCol, twoColumnWrapper } from \"../styles\";\n\ninterface DualColumnProps {\n styles?: Omit<\n React.CSSProperties,\n \"padding\" | \"paddingLeft\" | \"paddingRight\" | \"paddingTop\" | \"paddingBottom\"\n >;\n pX?: number;\n pY?: number;\n columnOneContent: React.ReactNode;\n columnOneStyles?: React.CSSProperties;\n columnTwoContent: React.ReactNode;\n columnTwoStyles?: React.CSSProperties;\n}\n\nexport const DualColumn: React.FC<DualColumnProps> = ({\n pX = 0,\n pY = 0,\n columnOneContent,\n columnTwoContent,\n columnOneStyles,\n columnTwoStyles,\n styles,\n}) => {\n const colMaxWidth = pX ? (600 - 2 * pX) / 2 : 600 / 2;\n\n return (\n <Section\n style={{ ...twoColumnWrapper, ...styles, padding: `${pY}px ${pX}px` }}\n >\n <Section\n style={{\n ...twoColumnCol,\n ...columnOneStyles,\n maxWidth: colMaxWidth,\n }}\n >\n {columnOneContent}\n </Section>\n <Section\n style={{ ...twoColumnCol, ...columnTwoStyles, maxWidth: colMaxWidth }}\n >\n {columnTwoContent}\n </Section>\n </Section>\n );\n};\n"],"mappings":"yFACA,OAAOA,MAAW,QAgBX,IAAMC,EAAwC,CAAC,CACpD,GAAAC,EAAK,EACL,GAAAC,EAAK,EACL,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,OAAAC,CACF,IAAM,CACJ,IAAMC,EAAcP,GAAM,IAAM,EAAIA,GAAM,EAAI,IAE9C,OACEQ,EAAA,cAACC,EAAA,CACC,MAAO,CAAE,GAAGC,EAAkB,GAAGJ,EAAQ,QAAS,GAAGL,OAAQD,KAAO,GAEpEQ,EAAA,cAACC,EAAA,CACC,MAAO,CACL,GAAGE,EACH,GAAGP,EACH,SAAUG,CACZ,GAECL,CACH,EACAM,EAAA,cAACC,EAAA,CACC,MAAO,CAAE,GAAGE,EAAc,GAAGN,EAAiB,SAAUE,CAAY,GAEnEJ,CACH,CACF,CAEJ","names":["React","DualColumn","pX","pY","columnOneContent","columnTwoContent","columnOneStyles","columnTwoStyles","styles","colMaxWidth","React","Section","twoColumnWrapper","twoColumnCol"]}