a tool for shared writing and social publishing
update the homeempty layout
+71
-155
+55
-75
app/(home-pages)/home/HomeEmpty/HomeEmpty.tsx
+55
-75
app/(home-pages)/home/HomeEmpty/HomeEmpty.tsx
···
1
1
"use client";
2
-
3
2
import { PubListEmptyIllo } from "components/ActionBar/Publications";
4
-
import { ButtonPrimary } from "components/Buttons";
5
-
import { AddSmall } from "components/Icons/AddSmall";
6
-
import { Link } from "react-aria-components";
7
-
import { DiscoverIllo } from "./DiscoverIllo";
3
+
import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
8
4
import { WelcomeToLeafletIllo } from "./WelcomeToLeafletIllo";
9
-
import { DiscoverSmall } from "components/Icons/DiscoverSmall";
10
-
import { PublishSmall } from "components/Icons/PublishSmall";
11
5
import { createNewLeaflet } from "actions/createNewLeaflet";
12
6
import { useIsMobile } from "src/hooks/isMobile";
7
+
import { SpeedyLink } from "components/SpeedyLink";
13
8
14
9
export function HomeEmptyState() {
15
-
let isMobile = useIsMobile();
16
10
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" />
11
+
<div className="flex flex-col gap-4 sm:flex-row">
12
+
<PublicationBanner />
13
+
<div className="flex sm:flex-col flex-row gap-2 sm:w-fit w-full items-center text-tertiary font-normal italic">
14
+
<hr className="border-border grow w-full sm:w-px h-px sm:h-full border-l" />
52
15
<div>or</div>
53
-
<hr className="border-border w-full" />
16
+
<hr className="border-border grow w-full sm:w-px h-px sm:h-full border-l" />
54
17
</div>
55
-
56
-
<PublicationBanner />
57
-
<DiscoverBanner />
18
+
<DocBanner />
58
19
</div>
59
20
);
60
21
}
61
22
62
-
export const PublicationBanner = (props: { small?: boolean }) => {
23
+
let bannerStyles =
24
+
"flex flex-row sm:flex-col py-4 px-4 sm:items-center items-start gap-4";
25
+
26
+
const PublicationBanner = () => {
63
27
return (
64
-
<div
65
-
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"}`}
66
-
>
67
-
{props.small ? (
68
-
<PublishSmall className="shrink-0 text-accent-contrast" />
69
-
) : (
28
+
<div className={`accent-container sm:basis-2/3 ${bannerStyles}`}>
29
+
<div className="my-auto flex flex-row sm:flex-col gap-4">
70
30
<div className="w-[64px] mx-auto">
71
31
<PubListEmptyIllo />
72
32
</div>
73
-
)}
74
-
<div className={`${props.small ? "pt-[2px]" : ""} grow`}>
75
-
<Link href={"/lish/createPub"} className="font-bold">
76
-
Start a Publication
77
-
</Link>{" "}
78
-
and blog in the Atmosphere
33
+
<div className={`flex flex-col sm:text-center text-left w-full`}>
34
+
<h3>Create a Publication!</h3>
35
+
<div className="mb-2 text-tertiary">
36
+
You can decide to share or publish it later.
37
+
</div>
38
+
<SpeedyLink href="/lish/createPub" className="sm:mx-auto mx-0 ">
39
+
<ButtonPrimary>Create a Publication</ButtonPrimary>
40
+
</SpeedyLink>
41
+
</div>
79
42
</div>
80
43
</div>
81
44
);
82
45
};
83
46
84
-
export const DiscoverBanner = (props: { small?: boolean }) => {
47
+
const DocBanner = () => {
48
+
let isMobile = useIsMobile();
49
+
85
50
return (
86
-
<div
87
-
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"}`}
88
-
>
89
-
{props.small ? (
90
-
<DiscoverSmall className="shrink-0 text-accent-contrast" />
91
-
) : (
92
-
<div className="w-[64px] mx-auto">
93
-
<DiscoverIllo />
51
+
<div className={`text-sm sm:basis-1/3 py-0! sm:py-4! ${bannerStyles}`}>
52
+
<div className="w-[48px] mx-auto">
53
+
<WelcomeToLeafletIllo />
54
+
</div>
55
+
56
+
<div className={`grow flex flex-col sm:text-center text-left w-full`}>
57
+
<h4>Just write something</h4>
58
+
<div className="mb-2 text-tertiary">
59
+
You can decide to share or publish it later.
94
60
</div>
95
-
)}
96
-
<div className={`${props.small ? "pt-[2px]" : ""} grow`}>
97
-
<Link href={"/discover"} className="font-bold">
98
-
Explore Publications
99
-
</Link>{" "}
100
-
on art, tech, games, music & more!
61
+
<ButtonSecondary
62
+
className="sm:mx-auto mx-0"
63
+
onClick={async () => {
64
+
let openNewLeaflet = (id: string) => {
65
+
if (isMobile) {
66
+
window.location.href = `/${id}?focusFirstBlock`;
67
+
} else {
68
+
window.open(`/${id}?focusFirstBlock`, "_blank");
69
+
}
70
+
};
71
+
72
+
let id = await createNewLeaflet({
73
+
pageType: "doc",
74
+
redirectUser: false,
75
+
});
76
+
openNewLeaflet(id);
77
+
}}
78
+
>
79
+
New Doc!
80
+
</ButtonSecondary>
101
81
</div>
102
82
</div>
103
83
);
+2
-2
app/(home-pages)/home/HomeEmpty/WelcomeToLeafletIllo.tsx
+2
-2
app/(home-pages)/home/HomeEmpty/WelcomeToLeafletIllo.tsx
+2
-10
app/(home-pages)/home/HomeLayout.tsx
+2
-10
app/(home-pages)/home/HomeLayout.tsx
···
23
23
import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data";
24
24
import { useState } from "react";
25
25
import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
26
-
import {
27
-
DiscoverBanner,
28
-
HomeEmptyState,
29
-
PublicationBanner,
30
-
} from "./HomeEmpty/HomeEmpty";
26
+
import { HomeEmptyState } from "./HomeEmpty/HomeEmpty";
31
27
32
28
export type Leaflet = {
33
29
added_at: string;
···
103
99
),
104
100
},
105
101
}}
106
-
pageTitle="Home"
102
+
pageTitle={"Home"}
107
103
/>
108
104
);
109
105
};
···
171
167
showPreview
172
168
/>
173
169
<div className="spacer h-4 w-full bg-transparent shrink-0 " />
174
-
175
-
{leaflets.filter((l) => !!l.token.leaflets_in_publications).length ===
176
-
0 && <PublicationBanner small />}
177
-
<DiscoverBanner small />
178
170
</>
179
171
);
180
172
}
+7
-3
components/ActionBar/Publications.tsx
+7
-3
components/ActionBar/Publications.tsx
···
245
245
}) => {
246
246
let { identity } = useIdentityData();
247
247
248
+
if (!identity) return;
249
+
248
250
let hasLooseleafs = !!identity?.permission_token_on_homepage.find(
249
251
(f) =>
250
252
f.permission_tokens.leaflets_to_documents &&
···
280
282
);
281
283
} else
282
284
return (
283
-
<ButtonPrimary compact className="text-sm!">
284
-
Create a Publication!
285
-
</ButtonPrimary>
285
+
<SpeedyLink href="/lish/createPub">
286
+
<ButtonPrimary compact className="text-sm!">
287
+
Create a Publication!
288
+
</ButtonPrimary>
289
+
</SpeedyLink>
286
290
);
287
291
}
288
292