a tool for shared writing and social publishing
Put in pro tier upgrade content
+152
-3
+68
app/lish/[did]/[publication]/UpgradeModal.tsx
+68
app/lish/[did]/[publication]/UpgradeModal.tsx
···
1
+
import { ButtonPrimary } from "components/Buttons";
2
+
import { Modal } from "components/Modal";
3
+
import { useState } from "react";
4
+
5
+
export const UpgradeContent = () => {
6
+
let [cadence, setCadence] = useState<"year" | "month">("year");
7
+
return (
8
+
<div className="flex flex-col justify-center text-center sm:gap-4 gap-2 w-full">
9
+
<h2>Get Leaflet Pro!</h2>
10
+
<div className="flex sm:flex-row flex-col sm:gap-8 gap-4 items-stretch w-full">
11
+
<div className="text-secondary sm:py-6 py-4 px-4">
12
+
<div className="font-bold text-primary">Analytics</div>
13
+
<div className="">Views per Post</div>
14
+
<div className="">Subscriber Counts</div>
15
+
<div className="">Top Referrers</div>
16
+
<hr className="my-4 border-border-light" />
17
+
<div className="font-bold text-primary">Coming ASAP</div>
18
+
<div className="">Emails</div>
19
+
<div className="">Paid Membership</div>
20
+
</div>
21
+
<div className="sm:w-64 w-full accent-container flex justify-center items-center">
22
+
<div className="flex flex-col justify-center text-center py-6">
23
+
<div className="flex gap-2 mb-3 p-1 bg-accent-contrast rounded-lg text-sm">
24
+
<button
25
+
className={`px-1 rounded-md ${cadence === "year" ? "bg-bg-page font-bold text-accent-contrast" : "bg-transparent text-bg-page"}`}
26
+
onClick={() => setCadence("year")}
27
+
>
28
+
Yearly
29
+
</button>
30
+
<button
31
+
className={`px-1 rounded-md ${cadence === "month" ? "bg-bg-page font-bold text-accent-contrast" : "bg-transparent text-bg-page"}`}
32
+
onClick={() => setCadence("month")}
33
+
>
34
+
Monthly
35
+
</button>
36
+
</div>
37
+
<div className="flex gap-1 items-baseline justify-center">
38
+
<div className="text-2xl font-bold leading-tight">
39
+
{cadence === "year" ? "$120" : "$12"}
40
+
</div>
41
+
<div className="text-secondary pb-4">
42
+
{cadence === "year" ? "/year" : "/month"}
43
+
</div>
44
+
</div>
45
+
<ButtonPrimary fullWidth className="mx-auto">
46
+
Get it!
47
+
</ButtonPrimary>
48
+
</div>
49
+
</div>
50
+
</div>
51
+
</div>
52
+
);
53
+
};
54
+
55
+
export const UpgradeModal = (props: {
56
+
trigger: React.ReactNode;
57
+
asChild?: boolean;
58
+
}) => {
59
+
return (
60
+
<Modal
61
+
asChild={props.asChild}
62
+
className="sm:w-fit w-[90vw]"
63
+
trigger={<div className="sm:w-full">{props.trigger}</div>}
64
+
>
65
+
<UpgradeContent />
66
+
</Modal>
67
+
);
68
+
};
+45
app/lish/[did]/[publication]/dashboard/Actions.tsx
+45
app/lish/[did]/[publication]/dashboard/Actions.tsx
···
10
10
import { useSmoker } from "components/Toast";
11
11
import { useIsMobile } from "src/hooks/isMobile";
12
12
import { SpeedyLink } from "components/SpeedyLink";
13
+
import { ButtonSecondary, ButtonTertiary } from "components/Buttons";
14
+
import { UpgradeModal } from "../UpgradeModal";
15
+
import { LeafletPro } from "components/Icons/LeafletPro";
13
16
14
17
export const Actions = (props: { publication: string }) => {
15
18
return (
16
19
<>
17
20
<NewDraftActionButton publication={props.publication} />
21
+
<MobileUpgrade />
22
+
18
23
<PublicationShareButton />
19
24
<PublicationSettingsButton publication={props.publication} />
25
+
<DesktopUpgrade />
20
26
</>
21
27
);
22
28
};
···
76
82
</Menu>
77
83
);
78
84
}
85
+
86
+
const MobileUpgrade = () => {
87
+
return (
88
+
<UpgradeModal
89
+
asChild
90
+
trigger={
91
+
<ActionButton
92
+
label="Upgrade to Leaflet Pro"
93
+
icon={<LeafletPro />}
94
+
className={`sm:hidden block bg-[var(--accent-light)]!`}
95
+
style={{ backgroundColor: "var(--accent-light) important!" }}
96
+
/>
97
+
}
98
+
/>
99
+
);
100
+
};
101
+
102
+
const DesktopUpgrade = () => {
103
+
return (
104
+
<div
105
+
style={{ backgroundColor: "var(--accent-light)" }}
106
+
className=" rounded-md mt-2 pt-2 pb-3 px-3 sm:block hidden"
107
+
>
108
+
<h4 className="text-accent-contrast text-sm">Get Leaflet Pro</h4>
109
+
<div className="text-xs text-secondary mb-2">
110
+
<strong>Analytics!</strong> Emails and membership soon.
111
+
</div>
112
+
<UpgradeModal
113
+
asChild
114
+
trigger={
115
+
<ButtonSecondary fullWidth compact className="text-sm!">
116
+
Learn more
117
+
</ButtonSecondary>
118
+
}
119
+
/>
120
+
<ButtonTertiary className="mx-auto text-sm">Dismiss</ButtonTertiary>
121
+
</div>
122
+
);
123
+
};
+9
app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
+9
app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
+6
-1
app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
+6
-1
app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx
···
12
12
} from "components/PageLayouts/DashboardLayout";
13
13
import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
14
14
import { type NormalizedPublication } from "src/utils/normalizeRecords";
15
+
import { PublicationAnalytics } from "./PublicationAnalytics";
15
16
16
17
export default function PublicationDashboard({
17
18
publication,
···
55
56
/>
56
57
),
57
58
},
58
-
Published: {
59
+
Posts: {
59
60
content: (
60
61
<PublishedPostsList
61
62
searchValue={debouncedSearchValue}
···
70
71
showPageBackground={!!record.theme?.showPageBackground}
71
72
/>
72
73
),
74
+
controls: null,
75
+
},
76
+
Analytics: {
77
+
content: <PublicationAnalytics />,
73
78
controls: null,
74
79
},
75
80
}}
+19
components/Icons/LeafletPro.tsx
+19
components/Icons/LeafletPro.tsx
···
1
+
import { Props } from "./Props";
2
+
3
+
export const LeafletPro = (props: Props) => {
4
+
return (
5
+
<svg
6
+
width="24"
7
+
height="24"
8
+
viewBox="0 0 24 24"
9
+
fill="none"
10
+
xmlns="http://www.w3.org/2000/svg"
11
+
{...props}
12
+
>
13
+
<path
14
+
d="M18.7746 14.4153C18.9173 13.0548 19.8101 13.0677 19.9572 14.4153C20.1043 15.7627 20.5438 16.6149 20.7453 16.8352C20.9468 17.0556 21.3114 17.3121 22.55 17.5921C23.7885 17.8721 23.7581 18.6935 22.55 18.8069C21.3418 18.9203 21.0958 19.2801 20.7453 19.6634C20.3949 20.0467 20.1218 20.841 19.9611 22.1653C19.8004 23.4897 18.9308 23.4787 18.7785 22.1653C18.6262 20.8518 18.0988 19.8781 17.9025 19.6634C17.7062 19.4487 17.0699 18.9126 16.0138 18.8069C14.9583 18.7009 14.9723 17.7682 16.0148 17.5921C17.0571 17.4158 17.5148 17.1033 17.7599 16.8352C18.0052 16.567 18.6318 15.7753 18.7746 14.4153ZM17.633 4.65261C18.2545 4.6359 18.2445 4.90445 18.2345 5.17605C18.2282 5.34951 18.2219 5.52489 18.38 5.6282C18.536 5.73003 18.9291 5.69449 19.38 5.65359C20.1026 5.58804 20.9756 5.50855 21.2687 5.95925C21.5262 6.35603 21.1984 6.75118 20.8839 7.12917C20.6178 7.44909 20.3617 7.75719 20.4787 8.04519C20.5743 8.28028 20.7705 8.4134 20.963 8.54323C21.278 8.75563 21.5826 8.96083 21.4191 9.59695C21.2462 10.2694 20.2065 10.4516 19.2316 10.6223C18.4149 10.7654 17.6432 10.9003 17.466 11.3089C17.3549 11.5652 17.5398 11.6849 17.7462 11.8186C17.9928 11.9783 18.2711 12.1588 18.1154 12.6175C17.7505 13.6907 16.5315 13.6907 15.3879 13.6907C14.4064 13.6907 13.4797 13.691 13.1955 14.3694C13.0315 14.7611 13.2797 14.8307 13.5519 14.9065C13.8852 14.9994 14.2551 15.1028 13.9494 15.8196C13.3634 17.1923 11.177 17.2049 9.17594 17.2161C8.4422 17.2202 7.73292 17.2243 7.13687 17.2952C7.069 17.3034 7.0084 17.3423 6.97281 17.4007C6.42436 18.3006 6.03616 19.2911 5.62125 20.3469C5.53013 20.5788 5.43753 20.8141 5.34195 21.052C5.21548 21.3665 4.8577 21.5191 4.54312 21.3928C4.22842 21.2664 4.07592 20.9087 4.2023 20.594C4.67305 19.422 5.2159 18.3441 5.80973 17.3548C6.77895 15.5699 8.68971 13.3798 10.7101 11.7346C12.5078 10.238 14.2248 9.11793 16.2228 8.26784C16.4728 8.16148 16.3987 7.86852 16.1379 7.94363C14.3657 8.45574 12.7987 9.4717 11.175 10.4954C9.40901 11.6087 7.92945 13.1146 7.01871 14.2093C6.85813 14.4023 6.50624 14.2433 6.5568 13.9973C6.80973 12.767 7.06835 11.6016 7.37809 10.7522L7.28238 10.7639C6.44178 10.8798 6.2203 11.0676 5.92105 11.3948L5.79605 11.554C5.51348 11.9708 5.29182 12.7065 5.15445 13.8382C5.0073 15.0507 4.25168 15.1172 4.03531 14.0637L4.00016 13.8382C3.8514 12.5557 3.33638 11.6044 3.14469 11.3948C2.97667 11.2113 2.48011 10.9103 1.66812 10.7688L1.30094 10.719C0.334043 10.6222 0.28533 9.81565 1.12223 9.57351L1.30094 9.53249C2.19153 9.38197 2.64469 9.16494 2.90445 8.93777L3.00504 8.84011C3.22962 8.59435 3.78116 7.71784 3.96402 6.51491L3.99625 6.2698C4.13585 4.94235 5.00674 4.95483 5.15055 6.2698C5.29411 7.58551 5.72422 8.62466 5.92105 8.84011C6.11788 9.05521 6.47376 9.25917 7.68277 9.53249C7.7981 9.55857 7.90142 9.59161 7.9943 9.62624C8.53604 9.05675 8.72654 9.22459 8.96695 9.43581C9.16999 9.6142 9.40867 9.82341 9.92203 9.6448C10.2576 9.52781 10.6911 8.76684 11.175 7.91823C11.8825 6.67737 12.6974 5.2484 13.4699 5.36745C14.4017 5.51106 14.3441 6.02636 14.3 6.42312C14.269 6.70142 14.2454 6.92081 14.5734 6.91238C14.9073 6.90341 15.2324 6.51136 15.6095 6.05593C16.1307 5.42651 16.7515 4.67636 17.633 4.65261ZM4.53238 8.17214C4.26911 8.81037 3.95672 9.28141 3.74332 9.51491C3.53024 9.74791 3.26162 9.93768 2.92594 10.096C3.26002 10.2368 3.56731 10.4174 3.79215 10.6282L3.88297 10.72L3.965 10.8176C4.15719 11.0641 4.3536 11.4381 4.51578 11.8401C4.52382 11.8601 4.53025 11.8812 4.53824 11.9016C4.68793 11.4542 4.89034 11.0398 5.18277 10.72C5.37157 10.5136 5.61429 10.266 6.01383 10.0764C5.65755 9.92268 5.39363 9.74547 5.18277 9.51491C5.02724 9.3448 4.91159 9.12468 4.83414 8.9612C4.74357 8.76996 4.65178 8.53982 4.56656 8.28347C4.55456 8.24733 4.54426 8.20969 4.53238 8.17214ZM6.55289 1.39773C6.63053 0.657978 7.11646 0.664932 7.19644 1.39773C7.27641 2.1306 7.51556 2.70953 7.62516 2.82937C7.73481 2.94909 7.93362 3.06297 8.6066 3.21511C9.27969 3.36744 9.26321 3.8135 8.6066 3.87527C7.94957 3.93694 7.81576 4.0438 7.62516 4.25222C7.43459 4.46067 7.28579 4.89241 7.1984 5.61257C7.11099 6.33285 6.63765 6.32689 6.55484 5.61257C6.4721 4.89889 6.18624 4.36957 6.07926 4.25222C5.97249 4.13547 5.62622 3.93275 5.05191 3.87527C4.47787 3.8177 4.4852 3.31103 5.05191 3.21511C5.61867 3.11933 5.86777 2.97509 6.00113 2.82937C6.13445 2.68358 6.47528 2.13758 6.55289 1.39773Z"
15
+
fill="currentColor"
16
+
/>
17
+
</svg>
18
+
);
19
+
};
+5
-2
components/Modal.tsx
+5
-2
components/Modal.tsx
···
22
22
<Dialog.Root open={open} onOpenChange={onOpenChange}>
23
23
<Dialog.Trigger asChild={asChild}>{trigger}</Dialog.Trigger>
24
24
<Dialog.Portal>
25
-
<Dialog.Overlay className="fixed inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-60" />
25
+
<Dialog.Overlay className="fixed z-10 inset-0 bg-primary data-[state=open]:animate-overlayShow opacity-60" />
26
26
<Dialog.Content
27
27
className={`
28
28
z-20 fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
29
29
overflow-y-scroll no-scrollbar w-max max-w-screen h-fit max-h-screen p-3
30
+
30
31
`}
31
32
>
32
33
<div
···
35
36
flex flex-col gap-1
36
37
${className}`}
37
38
>
38
-
{title && (
39
+
{title ? (
39
40
<Dialog.Title>
40
41
<h3>{title}</h3>
41
42
</Dialog.Title>
43
+
) : (
44
+
<Dialog.Title />
42
45
)}
43
46
<Dialog.Description>{children}</Dialog.Description>
44
47
</div>