diff --git a/app/lish/[did]/[publication]/UpgradeModal.tsx b/app/lish/[did]/[publication]/UpgradeModal.tsx
new file mode 100644
index 00000000..2f632feb
--- /dev/null
+++ b/app/lish/[did]/[publication]/UpgradeModal.tsx
@@ -0,0 +1,68 @@
+import { ButtonPrimary } from "components/Buttons";
+import { Modal } from "components/Modal";
+import { useState } from "react";
+
+export const UpgradeContent = () => {
+ let [cadence, setCadence] = useState<"year" | "month">("year");
+ return (
+
+
Get Leaflet Pro!
+
+
+
Analytics
+
Views per Post
+
Subscriber Counts
+
Top Referrers
+
+
Coming ASAP
+
Emails
+
Paid Membership
+
+
+
+
+
+
+
+
+
+ {cadence === "year" ? "$120" : "$12"}
+
+
+ {cadence === "year" ? "/year" : "/month"}
+
+
+
+ Get it!
+
+
+
+
+
+ );
+};
+
+export const UpgradeModal = (props: {
+ trigger: React.ReactNode;
+ asChild?: boolean;
+}) => {
+ return (
+ {props.trigger}}
+ >
+
+
+ );
+};
diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx
index ba945f35..6c257252 100644
--- a/app/lish/[did]/[publication]/dashboard/Actions.tsx
+++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx
@@ -10,13 +10,19 @@ import { usePublicationData } from "./PublicationSWRProvider";
import { useSmoker } from "components/Toast";
import { useIsMobile } from "src/hooks/isMobile";
import { SpeedyLink } from "components/SpeedyLink";
+import { ButtonSecondary, ButtonTertiary } from "components/Buttons";
+import { UpgradeModal } from "../UpgradeModal";
+import { LeafletPro } from "components/Icons/LeafletPro";
export const Actions = (props: { publication: string }) => {
return (
<>
+
+
+
>
);
};
@@ -76,3 +82,42 @@ function PublicationShareButton() {
);
}
+
+const MobileUpgrade = () => {
+ return (
+ }
+ className={`sm:hidden block bg-[var(--accent-light)]!`}
+ style={{ backgroundColor: "var(--accent-light) important!" }}
+ />
+ }
+ />
+ );
+};
+
+const DesktopUpgrade = () => {
+ return (
+
+
Get Leaflet Pro
+
+ Analytics! Emails and membership soon.
+
+
+ Learn more
+
+ }
+ />
+ Dismiss
+
+ );
+};
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
new file mode 100644
index 00000000..807c7836
--- /dev/null
+++ b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
@@ -0,0 +1,9 @@
+import { UpgradeContent } from "../UpgradeModal";
+
+export const PublicationAnalytics = () => {
+ return (
+
+
+
+ );
+};
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
index 184f4e25..51e67711 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
@@ -12,6 +12,7 @@ import {
} from "components/PageLayouts/DashboardLayout";
import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
import { type NormalizedPublication } from "src/utils/normalizeRecords";
+import { PublicationAnalytics } from "./PublicationAnalytics";
export default function PublicationDashboard({
publication,
@@ -55,7 +56,7 @@ export default function PublicationDashboard({
/>
),
},
- Published: {
+ Posts: {
content: (
,
+ controls: null,
+ },
}}
actions={}
currentPage="pub"
diff --git a/components/Icons/LeafletPro.tsx b/components/Icons/LeafletPro.tsx
new file mode 100644
index 00000000..8715ae35
--- /dev/null
+++ b/components/Icons/LeafletPro.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const LeafletPro = (props: Props) => {
+ return (
+
+ );
+};
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 2a534a7f..a2002207 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -22,11 +22,12 @@ export const Modal = ({
{trigger}
-
+
- {title && (
+ {title ? (
{title}
+ ) : (
+
)}
{children}