a tool for shared writing and social publishing
WIP refactor templates to use static preview images + overlaid buttons
+65
-22
+65
-22
app/templates/TemplateList.tsx
+65
-22
app/templates/TemplateList.tsx
···
11
11
import { createServerClient } from "@supabase/ssr";
12
12
import Image from "next/image";
13
13
import { AddTiny } from "components/Icons";
14
+
import Link from "next/link";
14
15
15
16
export function LeafletTemplate(props: {
16
17
id: string;
···
18
19
alt: string;
19
20
title: string;
20
21
description?: string;
22
+
idPreview: string;
23
+
idTemplate: string;
21
24
}) {
22
25
return (
23
26
<div className="flex flex-col gap-2">
24
27
<div className="flex flex-col gap-2">
25
28
{/* TODO: add preview with LeafletPreview */}
26
29
{/* OR could just use a static image with text overlay maybe */}
27
-
<div className="max-w-[274px] h-[154px] border p-4 rounded-md">
28
-
TEMPLATE PLACEHOLDER - PREVIEW WILL GO HERE!
30
+
<div className="max-w-[274px] h-[154px] relative">
31
+
{/* TEMPLATE PLACEHOLDER - PREVIEW WILL GO HERE! */}
32
+
<Image
33
+
className="absolute top-0 left-0 rounded-md w-full h-full object-cover"
34
+
src={props.image}
35
+
alt={props.alt}
36
+
width={274}
37
+
height={154}
38
+
/>
39
+
<div className="absolute w-full max-w-[274px] h-full max-h-[154px] flex flex-col gap-2 items-center place-content-center">
40
+
<Link
41
+
href={`https://leaflet.pub/` + props.idPreview}
42
+
target="_blank"
43
+
>
44
+
<ButtonPrimary className="bg-primary !border-2 !border-white hover:!outline-none hover:scale-105 hover:rotate-3 transition-all">
45
+
View Preview
46
+
</ButtonPrimary>
47
+
</Link>
48
+
<ButtonPrimary
49
+
className="!w-fit mx-4 !border-2 !border-white hover:!outline-none hover:scale-105 hover:-rotate-2 transition-all"
50
+
// TODO: make client component for the onClick to work?
51
+
// NB: do we need the edit link or will the readonly one work?
52
+
53
+
// onClick={async () => {
54
+
// let id = await createNewLeafletFromTemplate(props.idTemplate, false);
55
+
// window.open(`/${props.idTemplate}`, "_blank");
56
+
// }}
57
+
>
58
+
New from Template
59
+
<AddTiny />
60
+
</ButtonPrimary>
61
+
</div>
29
62
</div>
30
63
</div>
31
64
<div className="flex flex-col gap-2">
···
34
67
{props.description}
35
68
</div>
36
69
</div>
37
-
<ButtonPrimary
38
-
// TODO: make client component for the onClick to work?
39
-
// NB: do we need the edit link or will the readonly one work?
40
-
41
-
// onClick={async () => {
42
-
// let id = await createNewLeafletFromTemplate(t.id, false);
43
-
// window.open(`/${id}`, "_blank");
44
-
// }}
45
-
>
46
-
New from Template
47
-
<AddTiny />
48
-
</ButtonPrimary>
49
70
</div>
50
71
);
51
72
}
···
75
96
name="Themes"
76
97
description="Just a few of infinite theme possibilities — a nice starting point for further customization"
77
98
>
78
-
<LeafletTemplate id="TK" image="TK" alt="TK" title="Foliage" />
79
-
<LeafletTemplate id="TK" image="TK" alt="TK" title="Lunar" />
80
-
<LeafletTemplate id="TK" image="TK" alt="TK" title="Paper" />
81
-
<LeafletTemplate id="TK" image="TK" alt="TK" title="Oceanic" />
99
+
<LeafletTemplate
100
+
id="TK"
101
+
image="/templates/template-foliage-548x308.jpg"
102
+
alt="TK"
103
+
title="Foliage"
104
+
idPreview="e4323c1d-15c1-407d-afaf-e5d772a35f0e"
105
+
idTemplate="TK"
106
+
/>
107
+
<LeafletTemplate
108
+
id="TK"
109
+
image="/templates/template-foliage-548x308.jpg"
110
+
alt="TK"
111
+
title="Lunar"
112
+
/>
113
+
<LeafletTemplate
114
+
id="TK"
115
+
image="/templates/template-foliage-548x308.jpg"
116
+
alt="TK"
117
+
title="Paper"
118
+
/>
119
+
<LeafletTemplate
120
+
id="TK"
121
+
image="/templates/template-foliage-548x308.jpg"
122
+
alt="TK"
123
+
title="Oceanic"
124
+
/>
82
125
</TemplateList>
83
126
</>
84
127
);
···
92
135
>
93
136
<LeafletTemplate
94
137
id="TK"
95
-
image="TK"
138
+
image="/templates/template-foliage-548x308.jpg"
96
139
alt="TK"
97
140
title="Reading List"
98
141
description="Make a topical list to track your own reading, or share recs with friends!"
99
142
/>
100
143
<LeafletTemplate
101
144
id="TK"
102
-
image="TK"
145
+
image="/templates/template-foliage-548x308.jpg"
103
146
alt="TK"
104
147
title="Travel Planning"
105
148
description="Organize a trip — notes, logistics, itinerary, even a shared journal or scrapbook."
106
149
/>
107
150
<LeafletTemplate
108
151
id="TK"
109
-
image="TK"
152
+
image="/templates/template-foliage-548x308.jpg"
110
153
alt="TK"
111
154
title="Gift Guide"
112
155
description="Share favorite things with friends or loved ones — products, movies, restaurants…"
113
156
/>
114
157
<LeafletTemplate
115
158
id="TK"
116
-
image="TK"
159
+
image="/templates/template-foliage-548x308.jpg"
117
160
alt="TK"
118
161
title="Event Page"
119
162
description="Host an event — from a single party or meetup, to a whole conference or symposium!"
public/templates/template-foliage-548x308.jpg
public/templates/template-foliage-548x308.jpg
This is a binary file and will not be displayed.