Public
Back
Version 0
12/6/2024
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function ThankYouCard({ note, theme, font, recipientName, senderName }) {
const [firstHalf, secondHalf] = splitNote(note);
return (
<div className={`thank-you-card ${theme}`} style={{ fontFamily: font }}>
<div className="card-page left-page">
<div className="card-content">
<h2>Thank You</h2>
<p>Dear {recipientName},</p>
<p>{firstHalf}</p>
</div>
</div>
<div className="card-page right-page">
<div className="card-content">
<p>{secondHalf}</p>
<p className="signature">
Sincerely,<br />
{senderName}
</p>
</div>
</div>
</div>
);
}
function splitNote(note) {
const words = note.split(" ");
const midpoint = Math.ceil(words.length / 2);
return [
words.slice(0, midpoint).join(" "),
words.slice(midpoint).join(" "),
];
}
prashamtrivedi-thankyounotegenerator.web.val.run
Updated: December 6, 2024