leaflet.pub
a tool for shared writing and social publishing
awarm.space
1"use client";
2
3import { ButtonPrimary } from "components/Buttons";
4import Image from "next/image";
5import Link from "next/link";
6import { createNewLeafletFromTemplate } from "actions/createNewLeafletFromTemplate";
7import { AddTiny } from "components/Icons/AddTiny";
8
9export function LeafletTemplate(props: {
10 title: string;
11 description?: string;
12 image: string;
13 alt: string;
14 templateID: string; // readonly id for the leaflet that will be duplicated
15}) {
16 return (
17 <div className="flex flex-col gap-4">
18 <div className="flex flex-col gap-2">
19 <div className="max-w-[274px] h-[154px] relative">
20 <Image
21 className="absolute top-0 left-0 rounded-md w-full h-full object-cover"
22 src={props.image}
23 alt={props.alt}
24 width={274}
25 height={154}
26 />
27 </div>
28 </div>
29 <div className={`flex flex-col ${props.description ? "gap-4" : "gap-2"}`}>
30 <div className="gap-0">
31 <h3 className="font-bold text-center text-secondary">
32 {props.title}
33 </h3>
34 {props.description && (
35 <div className="text-tertiary text-sm font-normal text-center">
36 {props.description}
37 </div>
38 )}
39 </div>
40 <div className="flex sm:flex-row flex-col gap-2 justify-center items-center bottom-4">
41 <Link
42 href={`https://leaflet.pub/` + props.templateID}
43 target="_blank"
44 className="no-underline hover:no-underline"
45 >
46 <ButtonPrimary className="bg-primary hover:outline-hidden! hover:scale-105 hover:rotate-3 transition-all">
47 Preview
48 </ButtonPrimary>
49 </Link>
50 <ButtonPrimary
51 className=" hover:outline-hidden! hover:scale-105 hover:-rotate-2 transition-all"
52 onClick={async () => {
53 let id = await createNewLeafletFromTemplate(
54 props.templateID,
55 false,
56 );
57 window.open(`/${id}`, "_blank");
58 }}
59 >
60 Create
61 <AddTiny />
62 </ButtonPrimary>
63 </div>
64 </div>
65 </div>
66 );
67}
68
69export function TemplateList(props: {
70 name: string;
71 description?: string;
72 children: React.ReactNode;
73}) {
74 return (
75 <div className="templateLeafletGrid flex flex-col gap-6">
76 <div className="flex flex-col gap-0 text-center">
77 <h3 className="text-[24px]">{props.name}</h3>
78 <p className="text-secondary">{props.description}</p>
79 </div>
80 <div className="grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-8 gap-x-6 sm:gap-6 grow pb-8">
81 {props.children}
82 </div>
83 </div>
84 );
85}
86
87export function TemplateListThemes() {
88 return (
89 <>
90 <TemplateList
91 name="Themes"
92 description="A small sampling of Leaflet's infinite theme possibilities!"
93 >
94 <LeafletTemplate
95 title="Foliage"
96 image="/templates/template-foliage-548x308.jpg"
97 alt="preview image of Foliage theme, with lots of green and leafy bg"
98 templateID="e4323c1d-15c1-407d-afaf-e5d772a35f0e"
99 />
100 <LeafletTemplate
101 title="Lunar"
102 image="/templates/template-lunar-548x308.jpg"
103 alt="preview image of Lunar theme, with dark grey, red, and moon bg"
104 templateID="219d14ab-096c-4b48-83ee-36446e335c3e"
105 />
106 <LeafletTemplate
107 title="Paper"
108 image="/templates/template-paper-548x308.jpg"
109 alt="preview image of Paper theme, with red, gold, green and marbled paper bg"
110 templateID="9b28ceea-0220-42ac-87e6-3976d156f653"
111 />
112 <LeafletTemplate
113 title="Oceanic"
114 image="/templates/template-oceanic-548x308.jpg"
115 alt="preview image of Oceanic theme, with dark and light blue and ocean bg"
116 templateID="a65a56d7-713d-437e-9c42-f18bdc6fe2a7"
117 />
118 </TemplateList>
119 </>
120 );
121}
122
123export function TemplateListExamples() {
124 return (
125 <TemplateList
126 name="Examples"
127 description="Creative documents you can make and share with Leaflet"
128 >
129 <LeafletTemplate
130 title="Reading List"
131 description="Make a list for your own reading, or share recs with friends!"
132 image="/templates/template-reading-548x308.jpg"
133 alt="preview image of Reading List template, with a few sections and example books as sub-pages"
134 templateID="a5655b68-fe7a-4494-bda6-c9847523b2f6"
135 />
136 <LeafletTemplate
137 title="Travel Plan"
138 description="Organize a trip — notes, logistics, itinerary, even a shared scrapbook"
139 image="/templates/template-travel-548x308.jpg"
140 alt="preview image of a Travel Plan template, with pages for itinerary, logistics, research, and a travel diary canvas"
141 templateID="4d6f1392-dfd3-4015-925d-df55b7da5566"
142 />
143 <LeafletTemplate
144 title="Gift Guide"
145 description="Share your favorite things — products, restaurants, movies…"
146 image="/templates/template-gift-548x308.jpg"
147 alt="preview image for a Gift Guide template, with three blank canvases for different categories"
148 templateID="de73df29-35d9-4a43-a441-7ce45ad3b498"
149 />
150 <LeafletTemplate
151 title="Event Page"
152 description="Host an event — from a single meetup, to a whole conference!"
153 image="/templates/template-event-548x308.jpg"
154 alt="preview image for an Event Page template, with an event info section and linked pages / canvases for more info"
155 templateID="23d8a4ec-b2f6-438a-933d-726d2188974d"
156 />
157 </TemplateList>
158 );
159}