Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

feat: implement Base2 component for email templates and update ShareAnnunci to use it

Browse source
This commit is contained in:
Marco Pedone 2026-02-17 12:39:38 +01:00
parent eaee6246a5
commit dc859ece6f
3 changed files with 111 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/infoalloggi/emails/base.tsx
View file

@ -42,13 +42,15 @@ const Base = ({
<Preview>{preview}</Preview> <Preview>{preview}</Preview>
<Body className="py-2 text-center font-sans text-base text-neutral-700"> <Body className="py-2 text-center font-sans text-base text-neutral-700">
<Container className="max-w-2xl rounded-lg border border-[#eaeaea] border-solid pt-2 pb-10"> <Container className="max-w-2xl rounded-lg border border-[#eaeaea] border-solid pt-2 pb-10">
<div className="my-2 w-full py-2 dark:bg-white">
<Img <Img
alt="Logo Infoalloggi.it" alt="Logo Infoalloggi.it"
className="mx-auto my-2" className="mx-auto"
height={44} height={44}
src={`${env.BASE_URL}/Infoalloggi.png`} src={`${env.BASE_URL}/Infoalloggi.png`}
width={230} width={230}
/> />
</div>
<Section className="max-w-xl px-4"> <Section className="max-w-xl px-4">
<Hr /> <Hr />

82
apps/infoalloggi/emails/base2.tsx Normal file
View file

@ -0,0 +1,82 @@
import {
Body,
Container,
Head,
Hr,
Html,
Img,
Preview,
Section,
Tailwind,
Text,
} from "@react-email/components";
import type { JSX } from "react";
import { env } from "~/env";
const Base2 = ({
children,
preview,
noreply,
}: {
children: JSX.Element;
preview: string;
noreply?: boolean;
}) => {
return (
<Tailwind
config={{
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {},
},
}}
>
<Html>
<Head />
<Preview>{preview}</Preview>
<Body className="text-center font-sans text-base text-neutral-700">
<Container className="max-w-2xl rounded-lg border-2 border-[#eaeaea] border-solid pb-10">
<div className="w-full bg-white pt-4 pb-2">
<Img
alt="Logo Infoalloggi.it"
className="mx-auto rounded-lg bg-white p-2 dark:bg-white"
height={45}
src={`${env.BASE_URL}/Infoalloggi.png`}
width={230}
/>
<Hr className="max-w-xl" />
</div>
<Section className="max-w-xl px-4">
<Section className="max-w-lg">{children}</Section>
<Section className="mt-4">
{noreply && (
<Text className="text-neutral-500 text-xs">
Questo è un messaggio automatico, per favore non rispondere
a questa email.
</Text>
)}
</Section>
<Section className="mt-3">
<Text className="text-left text-sm">
Arcenia S.r.l. Via Beata Giovanna 1, Bassano del Grappa (VI) -
tel: 0424529869
</Text>
</Section>
</Section>
</Container>
</Body>
</Html>
</Tailwind>
);
};
export default Base2;

23
apps/infoalloggi/emails/share-annunci.tsx
View file

@ -7,7 +7,7 @@ import {
Text, Text,
} from "@react-email/components"; } from "@react-email/components";
import { env } from "~/env"; import { env } from "~/env";
import Base from "./base"; import Base2 from "./base2";
export type ShareAnnunci_NewMail = { export type ShareAnnunci_NewMail = {
mailType: "shareAnnunci"; mailType: "shareAnnunci";
props: ShareAnnunciProps; props: ShareAnnunciProps;
@ -22,10 +22,27 @@ type ShareAnnunciProps = {
prezzo: number; prezzo: number;
}[]; }[];
}; };
//TODO finire
const ShareAnnunci = ({ nome, annunci }: ShareAnnunciProps) => { const ShareAnnunci = ({ nome, annunci }: ShareAnnunciProps) => {
nome = "";
annunci = [
{
titolo: "MAROSTICA A 2 KM DAL CENTRO MANSARDA - SUBITO",
codice: "4493B",
prezzo: 40000,
immagine: "5434eb7f088a5b5a",
},
{
titolo: "MAROSTICA A 2 KM DAL CENTRO MANSARDA - SUBITO",
codice: "4493B",
prezzo: 40000,
immagine: "5434eb7f088a5b5a",
},
];
return ( return (
<Base preview="Procedi ora su Infoalloggi.it"> <Base2 preview="Procedi ora su Infoalloggi.it">
<> <>
<Heading className="text-center text-3xl leading-8"> <Heading className="text-center text-3xl leading-8">
Procedi ora su Infoalloggi.it Procedi ora su Infoalloggi.it
@ -81,7 +98,7 @@ const ShareAnnunci = ({ nome, annunci }: ShareAnnunciProps) => {
</Section> </Section>
</Section> </Section>
</> </>
</Base> </Base2>
); );
}; };