diff --git a/app/components/email-builder/Canvas.tsx b/app/components/email-builder/Canvas.tsx
new file mode 100644
index 0000000..1316f5f
--- /dev/null
+++ b/app/components/email-builder/Canvas.tsx
@@ -0,0 +1,39 @@
+import { EmailTemplate } from "../../lib/email-schema";
+
+type Props = {
+ template: EmailTemplate;
+ selectedBlockId: string | null;
+ onSelect: (id: string) => void;
+};
+
+export function Canvas({ template, selectedBlockId, onSelect }: Props) {
+ return (
+
+ {template.sections.map((s) =>
+ s.columns.map((c) =>
+ c.blocks.map((b) => (
+
onSelect(b.id)}
+ className={`border p-2 mb-2 cursor-pointer ${
+ b.id === selectedBlockId ? "border-blue-500" : "border-transparent"
+ }`}
+ >
+
+ {b.props.content}
+
+
+ ))
+ )
+ )}
+
+
+
+
+
Email Preview
+
+
+
+
+
Select a block
;
+
+ const block = template.sections
+ .flatMap((s) => s.columns)
+ .flatMap((c) => c.blocks)
+ .find((b) => b.id === selectedBlockId);
+
+ if (!block) return null;
+
+ return (
+
+
+
+
+ onChange(updateBlockInTemplate(template, block.id, { color: e.target.value }))
+ }
+ />
+
+
+
+ );
+}
diff --git a/app/favicon.ico b/app/favicon.ico
index 718d6fe..4097a78 100644
Binary files a/app/favicon.ico and b/app/favicon.ico differ
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..d24a88b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,19 +8,18 @@
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
- --font-sans: var(--font-geist-sans);
- --font-mono: var(--font-geist-mono);
+ --font-basier: var(--font-basier);
}
@media (prefers-color-scheme: dark) {
:root {
- --background: #0a0a0a;
- --foreground: #ededed;
+ --background: #ededed;
+ --foreground: #0a0a0a;
}
}
body {
background: var(--background);
color: var(--foreground);
- font-family: Arial, Helvetica, sans-serif;
-}
+ font-family: var(--font-basier);
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index f7fa87e..5154623 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,20 +1,16 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
+import localfont from "next/font/local";
-const geistSans = Geist({
- variable: "--font-geist-sans",
- subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
- variable: "--font-geist-mono",
- subsets: ["latin"],
-});
+const Basier = localfont({
+ src: "/../public/fonts/Basier.ttf",
+ variable: "--font-basier"
+})
export const metadata: Metadata = {
- title: "Create Next App",
- description: "Generated by create next app",
+ title: "Emails | Pocketsflow",
+ description: "Email Builder for Pocketsflow",
};
export default function RootLayout({
@@ -25,10 +21,10 @@ export default function RootLayout({
return (
{children}
);
-}
+}
\ No newline at end of file
diff --git a/app/lib/default-template.ts b/app/lib/default-template.ts
new file mode 100644
index 0000000..e418eaa
--- /dev/null
+++ b/app/lib/default-template.ts
@@ -0,0 +1,27 @@
+import { EmailTemplate } from "./email-schema";
+import { v4 as uuid } from "uuid";
+
+export const defaultTemplate: EmailTemplate = {
+ sections: [
+ {
+ id: uuid(),
+ columns: [
+ {
+ id: uuid(),
+ blocks: [
+ {
+ id: uuid(),
+ type: "text",
+ props: {
+ content: "Welcome to our newsletter 👋",
+ fontSize: "18px",
+ color: "#111111",
+ align: "center",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+};
diff --git a/app/lib/email-schema.ts b/app/lib/email-schema.ts
new file mode 100644
index 0000000..8b0e5fd
--- /dev/null
+++ b/app/lib/email-schema.ts
@@ -0,0 +1,21 @@
+export type BlockType = "text" | "image" | "button";
+
+export type Block = {
+ id: string;
+ type: BlockType;
+ props: Record;
+};
+
+export type Column = {
+ id: string;
+ blocks: Block[];
+};
+
+export type Section = {
+ id: string;
+ columns: Column[];
+};
+
+export type EmailTemplate = {
+ sections: Section[];
+};
diff --git a/app/lib/render-mjml.ts b/app/lib/render-mjml.ts
new file mode 100644
index 0000000..62a9b81
--- /dev/null
+++ b/app/lib/render-mjml.ts
@@ -0,0 +1,43 @@
+import { EmailTemplate } from "./email-schema";
+// @ts-ignore
+import mjml2html from "mjml";
+
+export function renderMJML(template: EmailTemplate) {
+ const mjml = `
+
+
+ ${template.sections
+ .map(
+ (s) => `
+
+ ${s.columns
+ .map(
+ (c) => `
+
+ ${c.blocks
+ .map(
+ (b) => `
+
+ ${b.props.content}
+
+ `
+ )
+ .join("")}
+
+ `
+ )
+ .join("")}
+
+ `
+ )
+ .join("")}
+
+
+`;
+
+ return mjml2html(mjml).html;
+}
diff --git a/app/lib/update-block.ts b/app/lib/update-block.ts
new file mode 100644
index 0000000..a1b4485
--- /dev/null
+++ b/app/lib/update-block.ts
@@ -0,0 +1,28 @@
+import { EmailTemplate } from "./email-schema";
+
+export function updateBlockInTemplate(
+ template: EmailTemplate,
+ blockId: string,
+ newProps: Record
+): EmailTemplate {
+ return {
+ ...template,
+ sections: template.sections.map((section) => ({
+ ...section,
+ columns: section.columns.map((column) => ({
+ ...column,
+ blocks: column.blocks.map((block) =>
+ block.id === blockId
+ ? {
+ ...block,
+ props: {
+ ...block.props,
+ ...newProps,
+ },
+ }
+ : block
+ ),
+ })),
+ })),
+ };
+}
diff --git a/app/page.tsx b/app/page.tsx
index 295f8fd..91e710c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,11 @@
-import Image from "next/image";
+"use client";
-export default function Home() {
- return (
-
-
-
-
-
- To get started, edit the page.tsx file.
-
-
- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
-
-