a tool for shared writing and social publishing
leaflet.pub
1import { HomeSmall } from "components/Icons/HomeSmall";
2import { ActionButton } from "./ActionButton";
3import { useIdentityData } from "components/IdentityProvider";
4import { PublicationButtons } from "./Publications";
5import { ReaderUnreadSmall } from "components/Icons/ReaderSmall";
6import {
7 NotificationsReadSmall,
8 NotificationsUnreadSmall,
9} from "components/Icons/NotificationSmall";
10import { SpeedyLink } from "components/SpeedyLink";
11import { Popover } from "components/Popover";
12import { WriterSmall } from "components/Icons/WriterSmall";
13export type navPages =
14 | "home"
15 | "reader"
16 | "pub"
17 | "notifications"
18 | "looseleafs"
19 | "tag"
20 | "profile"
21 | "discover";
22
23export const HomeButton = (props: {
24 current?: boolean;
25 className?: string;
26}) => {
27 return (
28 <SpeedyLink href={"/home"} className="hover:!no-underline">
29 <ActionButton
30 nav
31 icon={<HomeSmall />}
32 label="Write"
33 className={`${props.current ? "bg-bg-page! border-border-light!" : ""} w-full! ${props.className}`}
34 />
35 </SpeedyLink>
36 );
37};
38
39export const WriterButton = (props: {
40 currentPage: navPages;
41 currentPubUri?: string;
42 compactOnMobile?: boolean;
43}) => {
44 let current =
45 props.currentPage === "home" ||
46 props.currentPage === "looseleafs" ||
47 props.currentPage === "pub";
48
49 return (
50 <SpeedyLink href={"/home"} className="hover:!no-underline">
51 <ActionButton
52 nav
53 labelOnMobile={!props.compactOnMobile}
54 icon={<WriterSmall />}
55 label="Write"
56 className={`${current ? "bg-bg-page! border-border-light!" : ""}`}
57 />
58 </SpeedyLink>
59 );
60};
61
62export const ReaderButton = (props: {
63 current?: boolean;
64 subs: boolean;
65 compactOnMobile?: boolean;
66}) => {
67 return (
68 <SpeedyLink href={"/reader"} className="hover:no-underline!">
69 <ActionButton
70 nav
71 labelOnMobile={!props.compactOnMobile}
72 icon={<ReaderUnreadSmall />}
73 label="Read"
74 className={props.current ? "bg-bg-page! border-border-light!" : ""}
75 />
76 </SpeedyLink>
77 );
78};
79
80export function NotificationButton(props: { current?: boolean }) {
81 let { identity } = useIdentityData();
82 let unreads = identity?.notifications[0]?.count;
83
84 return (
85 <SpeedyLink href={"/notifications"} className="hover:no-underline!">
86 <ActionButton
87 nav
88 labelOnMobile={false}
89 icon={
90 unreads ? (
91 <NotificationsUnreadSmall className="text-accent-contrast" />
92 ) : (
93 <NotificationsReadSmall />
94 )
95 }
96 label="Notifications"
97 className={`${props.current ? "bg-bg-page! border-border-light!" : ""} ${unreads ? "text-accent-contrast!" : ""}`}
98 />
99 </SpeedyLink>
100 );
101}