+
+
+ {/* Header */}
+
+
+
+ Pro Access
+
+
+
+
+ Newsletters
+
+
+
+ Curated insights and platform updates
+
+
+
+ {/* Controls */}
+
+
+ {/* Search */}
+
+
+ setQ(e.target.value)}
+ placeholder="Search"
+ className="w-full pl-7 pr-4 py-3 bg-transparent border-b border-zinc-800 text-white placeholder:text-zinc-600 focus:outline-none focus:border-zinc-600 transition-colors text-sm font-light"
+ />
+
+
+ {/* Filter */}
+
+
+
+ {isDropdownOpen && (
+ <>
+
setIsDropdownOpen(false)}
+ />
+
+
+ {monthFilters.map((filter) => (
+
+ ))}
+
+
+ )}
+
+
+
+ {/* Active Filter */}
+ {selectedMonth !== "all" && (
+
+ FILTERED BY
+
+
+ )}
+
+ {/* Newsletter List */}
+
+
+ {/* Footer */}
+
+
+ More insights coming soon
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/newsletters/NewsletterContent.tsx b/apps/web/src/components/newsletters/NewsletterContent.tsx
new file mode 100644
index 0000000..2207c3a
--- /dev/null
+++ b/apps/web/src/components/newsletters/NewsletterContent.tsx
@@ -0,0 +1,177 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+"use client";
+
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useState } from "react";
+import { DocumentDuplicateIcon, CheckIcon } from "@heroicons/react/24/outline";
+import Image from "next/image";
+
+const CodeBlock = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = async () => {
+ const text = String(children).replace(/\n$/, '');
+ await navigator.clipboard.writeText(text);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ return (
+
+
+ {children}
+
+
+ {/* Copy Button */}
+
+
+ );
+};
+
+export default function NewsletterContent({ body }: { body: string }) {
+ return (
+
(
+
+ {children}
+
+ ),
+ h3: ({ children }: any) => (
+
+ {children}
+
+ ),
+
+ // Paragraphs
+ p: ({ children }: any) => (
+
+ {children}
+
+ ),
+
+ // Lists
+ ul: ({ children }: any) => (
+
+ ),
+ ol: ({ children }: any) => (
+
+ {children}
+
+ ),
+ li: ({ children }: any) => (
+ {children}
+ ),
+
+ // Code blocks - using our custom CodeBlock component
+ code: ({ node, inline, className, children, ...props }: any) => {
+ if (inline) {
+ return (
+
+ {children}
+
+ );
+ }
+ return {children};
+ },
+
+ // Blockquotes
+ blockquote: ({ children }: any) => (
+
+ {children}
+
+ ),
+
+ // Links
+ a: ({ children, href }: any) => (
+
+ {children}
+
+ ),
+
+ // Images
+ img: ({ src, alt }: any) => (
+
+
+
+
+ {alt && alt !== "undefined" && (
+
+ {alt}
+
+ )}
+
+ ),
+
+ // Table
+ table: ({ children }: any) => (
+
+ ),
+ th: ({ children }: any) => (
+
+ {children}
+ |
+ ),
+ td: ({ children }: any) => (
+
+ {children}
+ |
+ ),
+ }}
+ >
+ {body}
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/newsletters/NewsletterCrad.tsx b/apps/web/src/components/newsletters/NewsletterCrad.tsx
new file mode 100644
index 0000000..3910955
--- /dev/null
+++ b/apps/web/src/components/newsletters/NewsletterCrad.tsx
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Newsletter } from "@/data/newsletters";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+
+export default function NewsletterCard({ n }: { n: Newsletter }) {
+ return (
+
+
+ {/* Hero Image */}
+ {n.hero && (
+
+ )}
+
+ {/* Content */}
+
+ {n.featured && (
+
+
+ Featured
+
+
+ )}
+
+
+ {n.title}
+
+
+
+ {n.excerpt}
+
+
+
+
+
+ {new Date(n.date).toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ })}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/web/src/components/newsletters/NewsletterList.tsx b/apps/web/src/components/newsletters/NewsletterList.tsx
new file mode 100644
index 0000000..9a02f1c
--- /dev/null
+++ b/apps/web/src/components/newsletters/NewsletterList.tsx
@@ -0,0 +1,91 @@
+import { NEWSLETTERS, Newsletter } from "@/data/newsletters";
+import NewsletterCard from "./NewsletterCrad";
+import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
+
+export default function NewsletterList({
+ query = "",
+ monthFilter = "all",
+}: {
+ query?: string;
+ monthFilter?: string;
+}) {
+ const filtered = NEWSLETTERS
+ .sort((a, b) => +new Date(b.date) - +new Date(a.date))
+ .filter((newsletter) => {
+ const matchesSearch = query
+ ? newsletter.title.toLowerCase().includes(query.toLowerCase()) ||
+ newsletter.excerpt.toLowerCase().includes(query.toLowerCase())
+ : true;
+
+ const matchesMonth =
+ monthFilter === "all" ? true : newsletter.date.startsWith(monthFilter);
+
+ return matchesSearch && matchesMonth;
+ });
+
+ const groupedNewsletters = filtered.reduce((acc, newsletter) => {
+ const date = new Date(newsletter.date);
+ const year = date.getFullYear();
+ const month = date.toLocaleDateString("en-US", { month: "long" });
+
+ const key = `${year}-${month}`;
+ if (!acc[key]) {
+ acc[key] = {
+ year,
+ month,
+ newsletters: [],
+ };
+ }
+ acc[key].newsletters.push(newsletter);
+ return acc;
+ }, {} as Record
);
+
+ const groupedArray = Object.values(groupedNewsletters);
+
+ if (!filtered.length) {
+ return (
+
+
+
+
+ {query || monthFilter !== "all"
+ ? "No newsletters found"
+ : "No newsletters yet"}
+
+
+
+ {query || monthFilter !== "all"
+ ? "Try adjusting your search or filter"
+ : "New content coming soon"}
+
+
+ {groupedArray.map((group) => (
+
+ {/* Month/Year Header */}
+
+
+ {group.month} {group.year}
+
+
+
+ {group.newsletters.length}{" "}
+ {group.newsletters.length === 1 ? "article" : "articles"}
+
+
+
+ {/* Newsletter Grid */}
+
+ {group.newsletters.map((n) => (
+
+ ))}
+
+
+ ))}
+