leaflet.pub
a tool for shared writing and social publishing
cozylittle.house
1"use client";
2
3import { PubListEmptyIllo } from "components/ActionBar/Publications";
4import { ButtonPrimary } from "components/Buttons";
5import { AddSmall } from "components/Icons/AddSmall";
6import { Link } from "react-aria-components";
7import { DiscoverIllo } from "./DiscoverIllo";
8import { WelcomeToLeafletIllo } from "./WelcomeToLeafletIllo";
9import { DiscoverSmall } from "components/Icons/DiscoverSmall";
10import { PublishSmall } from "components/Icons/PublishSmall";
11import { createNewLeaflet } from "actions/createNewLeaflet";
12import { useIsMobile } from "src/hooks/isMobile";
13
14export function HomeEmptyState() {
15 let isMobile = useIsMobile();
16 return (
17 <div className="flex flex-col gap-4 font-bold">
18 <div className="container p-2 flex gap-4">
19 <div className="w-[72px]">
20 <WelcomeToLeafletIllo />
21 </div>
22 <div className="flex flex-col grow">
23 <h3 className="text-xl font-semibold pt-2">Leaflet</h3>
24 {/*<h3>A platform for social publishing.</h3>*/}
25 <div className="font-normal text-tertiary italic">
26 Write and share delightful documents!
27 </div>
28 <ButtonPrimary
29 className="!text-lg my-3"
30 onClick={async () => {
31 let openNewLeaflet = (id: string) => {
32 if (isMobile) {
33 window.location.href = `/${id}?focusFirstBlock`;
34 } else {
35 window.open(`/${id}?focusFirstBlock`, "_blank");
36 }
37 };
38
39 let id = await createNewLeaflet({
40 pageType: "doc",
41 redirectUser: false,
42 });
43 openNewLeaflet(id);
44 }}
45 >
46 <AddSmall /> Write a Doc!
47 </ButtonPrimary>
48 </div>
49 </div>
50 <div className="flex gap-2 w-full items-center text-tertiary font-normal italic">
51 <hr className="border-border w-full" />
52 <div>or</div>
53 <hr className="border-border w-full" />
54 </div>
55
56 <PublicationBanner />
57 <DiscoverBanner />
58 <div className="text-tertiary italic text-sm font-normal -mt-2">
59 Right now docs and publications are separate. Soon you'll be able to add
60 docs to pubs!
61 </div>
62 </div>
63 );
64}
65
66export const PublicationBanner = (props: { small?: boolean }) => {
67 return (
68 <div
69 className={`accent-container flex sm:py-2 items-center ${props.small ? "items-start gap-2 p-2 text-sm font-normal" : "items-center p-4 gap-4"}`}
70 >
71 {props.small ? (
72 <PublishSmall className="shrink-0 text-accent-contrast" />
73 ) : (
74 <div className="w-[64px] mx-auto">
75 <PubListEmptyIllo />
76 </div>
77 )}
78 <div className={`${props.small ? "pt-[2px]" : ""} grow`}>
79 <Link href={"/lish/createPub"} className="font-bold">
80 Start a Publication
81 </Link>{" "}
82 and blog in the Atmosphere
83 </div>
84 </div>
85 );
86};
87
88export const DiscoverBanner = (props: { small?: boolean }) => {
89 return (
90 <div
91 className={`accent-container flex sm:py-2 items-center ${props.small ? "items-start gap-2 p-2 text-sm font-normal" : "items-center p-4 gap-4"}`}
92 >
93 {props.small ? (
94 <DiscoverSmall className="shrink-0 text-accent-contrast" />
95 ) : (
96 <div className="w-[64px] mx-auto">
97 <DiscoverIllo />
98 </div>
99 )}
100 <div className={`${props.small ? "pt-[2px]" : ""} grow`}>
101 <Link href={"/discover"} className="font-bold">
102 Explore Publications
103 </Link>{" "}
104 on art, tech, games, music & more!
105 </div>
106 </div>
107 );
108};