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}