gib/GibSend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add transactional mail animations

Browse Source
This commit is contained in:
KMKoushik
2024-04-23 22:11:23 +10:00
parent 8772fdb13b
commit 3b6d2dec25
3 changed files with 86 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/marketing/package.json
View File

@@ -10,6 +10,7 @@
},
"dependencies": {
"@heroicons/react": "^2.1.3",
"date-fns": "^3.6.0",
"framer-motion": "^11.0.24",
"lucide-react": "^0.359.0",
"next": "14.1.4",

98
apps/marketing/src/app/page.tsx
View File

@@ -8,6 +8,7 @@ import {
ChatBubbleOvalLeftEllipsisIcon,
BellAlertIcon,
} from "@heroicons/react/24/solid";
import { formatDate } from "date-fns";
export default function Home() {
return (
@@ -57,23 +58,86 @@ export default function Home() {
<li>Get notified of email bounces and complaints.</li>
</ul>
</div>
<div className="w-1/2">
{/* <Code
codeBlocks={[
{
language: "js",
code: `const unsend = require("unsend");
const email = unsend.email();
email.send({
to: "user@example.com",
subject: "Hello, World!",
text: "Hello, World!",
});`,
},
]}
/> */}
<div className="w-1/2 flex flex-col border rounded-lg p-8">
<div className=" border-l border-dashed flex flex-col gap-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
duration: 0.3,
damping: 15,
stiffness: 100,
type: "spring",
}}
viewport={{ once: true }}
className="flex flex-col gap-4"
>
<div className="flex gap-5 items-start">
<div className=" -ml-2.5">
<div
className={`flex justify-center items-center p-1.5 bg-gray-600/50 rounded-full`}
>
<div className={`h-2 w-2 rounded-full bg-gray-600`}></div>
</div>
</div>
<div className="-mt-1">
<div className=" capitalize font-medium">
<div
className={` text-center w-[130px] rounded capitalize py-1 text-xs bg-gray-400/10 text-gray-400 border-gray-400/10`}
>
Sent
</div>
</div>
<div className="text-xs text-muted-foreground mt-2">
{formatDate(Date.now() - 100000, "MMM dd, hh:mm a")}
</div>
<div className="mt-1 text-primary/80">
We received your request and sent the email to recipient's
server.
</div>
</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 25 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
duration: 0.3,
damping: 15,
stiffness: 100,
type: "spring",
delay: 0.3,
}}
viewport={{ once: true }}
>
<div className="flex gap-5 items-start">
<div className=" -ml-2.5">
<div
className={`flex justify-center items-center p-1.5 bg-emerald-500/50 rounded-full`}
>
<div
className={`h-2 w-2 rounded-full bg-emerald-500`}
></div>
</div>
</div>
<div className="-mt-1">
<div className=" capitalize font-medium">
<div
className={` text-center w-[130px] rounded capitalize py-1 text-xs bg-emerald-500/10 text-emerald-500 border-emerald-600/10`}
>
Delivered
</div>
</div>
<div className="text-xs text-muted-foreground mt-2">
{formatDate(new Date(), "MMM dd, hh:mm a")}
</div>
<div className="mt-1 text-primary/80">
Mail is successfully delivered to the recipient.
</div>
</div>
</div>
</motion.div>
</div>
</div>
</div>
<div className="flex">

5
pnpm-lock.yaml generated
View File

@@ -30,6 +30,9 @@ importers:
'@heroicons/react':
specifier: ^2.1.3
version: 2.1.3(react@18.2.0)
date-fns:
specifier: ^3.6.0
version: 3.6.0
framer-motion:
specifier: ^11.0.24
version: 11.0.24(react-dom@18.2.0)(react@18.2.0)
@@ -4483,7 +4486,7 @@ packages:
enhanced-resolve: 5.16.0
eslint: 8.57.0
eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0)(eslint@8.57.0)
eslint-plugin-import: 2.29.1(eslint@8.57.0)
fast-glob: 3.3.2
get-tsconfig: 4.7.3
is-core-module: 2.13.1