a tool for shared writing and social publishing
add more theme images and home button
Brendan Schlagel
(Oct 17, 2024, 12:50 PM EDT)
cb002773
0cc1672f
+50
-36
+36
-30
app/templates/TemplateList.tsx
+36
-30
app/templates/TemplateList.tsx
···
14
14
import Link from "next/link";
15
15
16
16
export function LeafletTemplate(props: {
17
-
id: string;
18
-
image: string;
19
-
alt: string;
20
17
title: string;
21
18
description?: string;
19
+
image: string;
20
+
alt: string;
22
21
idPreview: string;
23
22
idTemplate: string;
24
23
}) {
···
40
39
<Link
41
40
href={`https://leaflet.pub/` + props.idPreview}
42
41
target="_blank"
42
+
className="no-underline hover:no-underline"
43
43
>
44
44
<ButtonPrimary className="bg-primary !border-2 !border-white hover:!outline-none hover:scale-105 hover:rotate-3 transition-all">
45
45
View Preview
···
94
94
<>
95
95
<TemplateList
96
96
name="Themes"
97
-
description="Just a few of infinite theme possibilities — a nice starting point for further customization"
97
+
description="A small sampling of infinite theme possibilities"
98
98
>
99
99
<LeafletTemplate
100
-
id="TK"
101
-
image="/templates/template-foliage-548x308.jpg"
102
-
alt="TK"
103
100
title="Foliage"
101
+
image="/templates/template-foliage-548x308.jpg"
102
+
alt="preview image of Foliage theme, with lots of green and leafy bg"
104
103
idPreview="e4323c1d-15c1-407d-afaf-e5d772a35f0e"
105
-
idTemplate="TK"
104
+
idTemplate=""
106
105
/>
107
106
<LeafletTemplate
108
-
id="TK"
109
-
image="/templates/template-foliage-548x308.jpg"
110
-
alt="TK"
111
107
title="Lunar"
108
+
image="/templates/template-lunar-548x308.jpg"
109
+
alt="preview image of Lunar theme, with dark grey, red, and moon bg"
110
+
idPreview="219d14ab-096c-4b48-83ee-36446e335c3e"
111
+
idTemplate=""
112
112
/>
113
113
<LeafletTemplate
114
-
id="TK"
115
-
image="/templates/template-foliage-548x308.jpg"
116
-
alt="TK"
117
114
title="Paper"
115
+
image="/templates/template-paper-548x308.jpg"
116
+
alt="preview image of Paper theme, with red, gold, green and marbled paper bg"
117
+
idPreview="9b28ceea-0220-42ac-87e6-3976d156f653"
118
+
idTemplate=""
118
119
/>
119
120
<LeafletTemplate
120
-
id="TK"
121
-
image="/templates/template-foliage-548x308.jpg"
122
-
alt="TK"
123
121
title="Oceanic"
122
+
image="/templates/template-oceanic-548x308.jpg"
123
+
alt="preview image of Oceanic theme, with dark and light blue and ocean bg"
124
+
idPreview="a65a56d7-713d-437e-9c42-f18bdc6fe2a7"
125
+
idTemplate=""
124
126
/>
125
127
</TemplateList>
126
128
</>
···
131
133
return (
132
134
<TemplateList
133
135
name="Examples"
134
-
description="Useful ways to use Leaflet for creative shared documents"
136
+
description="Creative documents to make and share with Leaflet"
135
137
>
136
138
<LeafletTemplate
137
-
id="TK"
138
-
image="/templates/template-foliage-548x308.jpg"
139
-
alt="TK"
140
139
title="Reading List"
141
140
description="Make a topical list to track your own reading, or share recs with friends!"
142
-
/>
143
-
<LeafletTemplate
144
-
id="TK"
145
141
image="/templates/template-foliage-548x308.jpg"
146
142
alt="TK"
143
+
idPreview=""
144
+
idTemplate=""
145
+
/>
146
+
<LeafletTemplate
147
147
title="Travel Planning"
148
148
description="Organize a trip — notes, logistics, itinerary, even a shared journal or scrapbook."
149
-
/>
150
-
<LeafletTemplate
151
-
id="TK"
152
149
image="/templates/template-foliage-548x308.jpg"
153
150
alt="TK"
151
+
idPreview=""
152
+
idTemplate=""
153
+
/>
154
+
<LeafletTemplate
154
155
title="Gift Guide"
155
156
description="Share favorite things with friends or loved ones — products, movies, restaurants…"
156
-
/>
157
-
<LeafletTemplate
158
-
id="TK"
159
157
image="/templates/template-foliage-548x308.jpg"
160
158
alt="TK"
159
+
idPreview=""
160
+
idTemplate=""
161
+
/>
162
+
<LeafletTemplate
161
163
title="Event Page"
162
164
description="Host an event — from a single party or meetup, to a whole conference or symposium!"
165
+
image="/templates/template-foliage-548x308.jpg"
166
+
alt="TK"
167
+
idPreview=""
168
+
idTemplate=""
163
169
/>
164
170
</TemplateList>
165
171
);
+14
-6
app/templates/page.tsx
+14
-6
app/templates/page.tsx
···
1
-
// "use client";
2
-
1
+
import Link from "next/link";
2
+
import TemplateHomeButton from "./TemplateHomeButton";
3
3
import { TemplateListExamples, TemplateListThemes } from "./TemplateList";
4
4
import { HomeButton } from "components/HomeButton";
5
+
import { HoverButton } from "components/Buttons";
6
+
import { HomeSmall } from "components/Icons";
5
7
6
8
export const metadata = {
7
9
title: "Leaflet Templates",
···
13
15
<div className="flex h-full bg-bg-leaflet">
14
16
<div className="home relative max-w-screen-lg w-full h-full mx-auto flex sm:flex-row flex-col-reverse px-2 sm:px-6 ">
15
17
<div className="homeOptions z-10 shrink-0 sm:static absolute bottom-0 place-self-end sm:place-self-start flex sm:flex-col flex-row-reverse gap-2 sm:w-fit w-full items-center pb-2 pt-1 sm:pt-7">
16
-
{/* TODO: return to home button */}
17
-
{/* only works with "use client"; - ??? */}
18
-
{/* <HomeButton /> */}
19
-
home!
18
+
{/* NOT using <HomeButton /> b/c it does a permission check we don't need */}
19
+
<Link href="/home">
20
+
<HoverButton
21
+
noLabelOnMobile
22
+
icon={<HomeSmall />}
23
+
label="Go Home"
24
+
background="bg-accent-1"
25
+
text="text-accent-2"
26
+
/>
27
+
</Link>
20
28
</div>
21
29
<div className="flex flex-col gap-4 py-6 pt-3 sm:pt-6 sm:pb-12 sm:pl-6 grow w-full h-full overflow-y-scroll no-scrollbar">
22
30
<h1 className="text-center">Template Library</h1>
public/templates/template-foliage-548x308.jpg
public/templates/template-foliage-548x308.jpg
This is a binary file and will not be displayed.
public/templates/template-lunar-548x308.jpg
public/templates/template-lunar-548x308.jpg
This is a binary file and will not be displayed.
public/templates/template-oceanic-548x308.jpg
public/templates/template-oceanic-548x308.jpg
This is a binary file and will not be displayed.
public/templates/template-paper-548x308.jpg
public/templates/template-paper-548x308.jpg
This is a binary file and will not be displayed.