a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

WIP refactor templates to use static preview images + overlaid buttons

+65 -22
+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

This is a binary file and will not be displayed.