infoalloggi-monorepo/apps/infoalloggi/emails/share-annunci.tsx

98 lines
2.8 KiB
TypeScript

import {
Button,
Heading,
Img,
Link,
Row,
Section,
Text,
} from "@react-email/components";
import { env } from "~/env";
import Base from "./base";
export type ShareAnnunci_NewMail = {
mailType: "shareAnnunci";
props: ShareAnnunciProps;
};
type ShareAnnunciProps = {
nome: string;
annunci?: {
titolo: string | null;
immagine: string | null;
codice: string;
prezzo: number;
}[];
};
const ShareAnnunci = ({ nome, annunci }: ShareAnnunciProps) => {
return (
<Base preview="Procedi ora su Infoalloggi.it">
<>
<Heading className="text-center text-3xl leading-8">
Procedi ora su Infoalloggi.it
</Heading>
<Section className="px-5 text-left text-base md:px-12">
<Row>
<Text>
Ciao {nome},<br />
Accedi ora al servizio di ricerca Infoalloggi, dove potrai andare
a contattare direttamente i proprietari degli immobili
disponibili.
</Text>
</Row>
<Section className="mb-5">
<Button
className="mx-auto box-border inline-flex h-10 items-center justify-center whitespace-nowrap rounded-md bg-neutral-100 px-4 py-2 text-center align-middle font-semibold text-neutral-900"
href={`${env.BASE_URL}`}
>
Vai al Sito
</Button>
</Section>
<Section>
{annunci?.map((annuncio) => (
<>
<Text className="font-semibold">
Annunci selezionati per te:
</Text>
<Section className="mb-7.5" key={annuncio.codice}>
<Row className="mb-3">
<Img
alt={`Annuncio image - ${annuncio.codice}`}
className="block w-60 rounded-lg object-cover object-center"
height="140px"
src={`${env.BASE_URL}/storage-api/get/${annuncio.immagine}?media=image`}
width="100%"
/>
</Row>
<Row className="block w-full">
<div className="mb-1.25 flex h-6 w-fit items-center justify-center gap-1 rounded-full bg-indigo-600 px-2 font-semibold text-[12px] text-white leading-0">
<strong>Codice: </strong> {annuncio.codice}
</div>
<Heading
as="h2"
className="mt-0 mb-1.5 font-bold text-[16px] leading-none"
>
{annuncio.titolo || "N/A"}
</Heading>
<Text className="m-0 text-[14px] text-gray-500 leading-6">
<strong>Prezzo:</strong>
{(annuncio.prezzo / 1e2).toFixed(2)}
</Text>
<Link
className="block font-semibold text-[14px] text-indigo-600 no-underline"
href={`${env.BASE_URL}/annuncio/${annuncio.codice}`}
>
Scheda dell&apos;annuncio
</Link>
</Row>
</Section>
</>
))}
</Section>
</Section>
</>
</Base>
);
};
export default ShareAnnunci;