a tool for shared writing and social publishing

refactor to use a single Link element in the LeafletListItem

+65 -81
+15 -33
app/(home-pages)/home/LeafletList/LeafletInfo.tsx
··· 32 32 className={`leafletInfo w-full min-w-0 flex flex-col ${props.className}`} 33 33 > 34 34 <div className="flex justify-between items-center shrink-0 max-w-full gap-2 leading-tight overflow-hidden"> 35 - <Link 36 - onMouseEnter={() => setPrefetch(true)} 37 - onPointerDown={() => setPrefetch(true)} 38 - prefetch={prefetch} 39 - href={`/${props.token.id}`} 40 - className="no-underline sm:hover:no-underline text-primary grow min-w-0" 41 - > 42 - <h3 className="sm:text-lg text-base truncate w-full min-w-0"> 43 - {props.title} 44 - </h3> 45 - </Link> 35 + <h3 className="sm:text-lg text-base truncate w-full min-w-0"> 36 + {props.title} 37 + </h3> 46 38 <div className="flex gap-1 shrink-0"> 47 39 {props.isTemplate && props.display === "list" ? ( 48 40 <TemplateSmall ··· 60 52 /> 61 53 </div> 62 54 </div> 63 - <Link 64 - onMouseEnter={() => setPrefetch(true)} 65 - onPointerDown={() => setPrefetch(true)} 66 - prefetch={prefetch} 67 - href={`/${props.token.id}`} 68 - className="no-underline sm:hover:no-underline text-primary w-full" 69 - > 70 - {props.draft || props.published ? ( 71 - <div 72 - className={`text-xs ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`} 73 - > 74 - {props.published 75 - ? `Published ${prettyPublishedAt}` 76 - : `Draft ${prettyCreatedAt}`} 77 - </div> 78 - ) : ( 79 - <div className="text-xs text-tertiary">{prettyCreatedAt}</div> 80 - )} 81 - {props.archived && ( 82 - <div className="text-xs text-tertiary">archived</div> 83 - )} 84 - </Link> 55 + {props.draft || props.published ? ( 56 + <div 57 + className={`text-xs ${props.published ? "font-bold text-tertiary" : "text-tertiary"}`} 58 + > 59 + {props.published 60 + ? `Published ${prettyPublishedAt}` 61 + : `Draft ${prettyCreatedAt}`} 62 + </div> 63 + ) : ( 64 + <div className="text-xs text-tertiary">{prettyCreatedAt}</div> 65 + )} 66 + {props.archived && <div className="text-xs text-tertiary">archived</div>} 85 67 {props.isTemplate && props.display === "grid" ? ( 86 68 <div className="absolute -top-2 right-1"> 87 69 <TemplateSmall
+49 -33
app/(home-pages)/home/LeafletList/LeafletListItem.tsx
··· 4 4 import { LeafletListPreview, LeafletGridPreview } from "./LeafletPreview"; 5 5 import { LeafletInfo } from "./LeafletInfo"; 6 6 import { useState, useRef, useEffect } from "react"; 7 + import { SpeedyLink } from "components/SpeedyLink"; 7 8 8 9 export const LeafletListItem = (props: { 9 10 token: PermissionToken; ··· 50 51 if (props.display === "list") 51 52 return ( 52 53 <> 53 - <div 54 - ref={previewRef} 55 - className={`gap-3 w-full ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border"}`} 56 - style={{ 57 - backgroundColor: props.cardBorderHidden 58 - ? "transparent" 59 - : "rgba(var(--bg-page), var(--bg-page-alpha))", 54 + <LeafletLink id={props.token.id}> 55 + <div 56 + ref={previewRef} 57 + className={`gap-3 w-full ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`} 58 + style={{ 59 + backgroundColor: props.cardBorderHidden 60 + ? "transparent" 61 + : "rgba(var(--bg-page), var(--bg-page-alpha))", 60 62 61 - display: props.isHidden ? "none" : "flex", 62 - }} 63 - > 64 - {props.showPreview && ( 65 - <LeafletListPreview isVisible={isOnScreen} {...props} /> 66 - )} 67 - <LeafletInfo isTemplate={isTemplate} {...props} /> 68 - </div> 63 + display: props.isHidden ? "none" : "flex", 64 + }} 65 + > 66 + {props.showPreview && ( 67 + <LeafletListPreview isVisible={isOnScreen} {...props} /> 68 + )} 69 + <LeafletInfo isTemplate={isTemplate} {...props} /> 70 + </div> 71 + </LeafletLink> 69 72 {props.cardBorderHidden && ( 70 73 <hr 71 74 className="last:hidden border-border-light" ··· 77 80 </> 78 81 ); 79 82 return ( 80 - <div 81 - ref={previewRef} 82 - className={`leafletGridListItem relative 83 + <LeafletLink id={props.token.id}> 84 + <div 85 + ref={previewRef} 86 + className={`leafletGridListItem relative 83 87 flex flex-col gap-1 p-1 h-52 84 88 block-border border-border! hover:outline-border 85 89 `} 86 - style={{ 87 - backgroundColor: props.cardBorderHidden 88 - ? "transparent" 89 - : "rgba(var(--bg-page), var(--bg-page-alpha))", 90 + style={{ 91 + backgroundColor: props.cardBorderHidden 92 + ? "transparent" 93 + : "rgba(var(--bg-page), var(--bg-page-alpha))", 94 + 95 + display: props.isHidden ? "none" : "flex", 96 + }} 97 + > 98 + <div className="grow"> 99 + <LeafletGridPreview {...props} isVisible={isOnScreen} /> 100 + </div> 101 + <LeafletInfo 102 + isTemplate={isTemplate} 103 + className="px-1 pb-0.5 shrink-0" 104 + {...props} 105 + /> 106 + </div> 107 + </LeafletLink> 108 + ); 109 + }; 90 110 91 - display: props.isHidden ? "none" : "flex", 92 - }} 111 + const LeafletLink = (props: { id: string; children: React.ReactNode }) => { 112 + return ( 113 + <SpeedyLink 114 + href={`/${props.id}`} 115 + className={`no-underline hover:no-underline! text-primary`} 93 116 > 94 - <div className="grow"> 95 - <LeafletGridPreview {...props} isVisible={isOnScreen} /> 96 - </div> 97 - <LeafletInfo 98 - isTemplate={isTemplate} 99 - className="px-1 pb-0.5 shrink-0" 100 - {...props} 101 - /> 102 - </div> 117 + {props.children} 118 + </SpeedyLink> 103 119 ); 104 120 };
+1 -1
app/(home-pages)/home/LeafletList/LeafletOptions.tsx
··· 48 48 }} 49 49 trigger={ 50 50 <div 51 - className="text-secondary shrink-0" 51 + className="text-secondary shrink-0 relative" 52 52 onClick={(e) => { 53 53 e.preventDefault; 54 54 e.stopPropagation;
-14
app/(home-pages)/home/LeafletList/LeafletPreview.tsx
··· 8 8 useEntity, 9 9 useReferenceToEntity, 10 10 } from "src/replicache"; 11 - import { useTemplateState } from "../Actions/CreateNewButton"; 12 11 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 13 12 import { LeafletContent } from "./LeafletContent"; 14 13 import { Tooltip } from "components/Tooltip"; 15 - import { useState } from "react"; 16 - import Link from "next/link"; 17 - import { SpeedyLink } from "components/SpeedyLink"; 18 14 19 15 export const LeafletListPreview = (props: { 20 16 draft?: boolean; ··· 174 170 </div> 175 171 </ThemeBackgroundProvider> 176 172 </div> 177 - <LeafletPreviewLink id={props.token.id} /> 178 173 </div> 179 174 </ThemeProvider> 180 175 ); 181 176 }; 182 - 183 - const LeafletPreviewLink = (props: { id: string }) => { 184 - return ( 185 - <SpeedyLink 186 - href={`/${props.id}`} 187 - className={`hello no-underline sm:hover:no-underline text-primary absolute inset-0 w-full h-full bg-bg-test`} 188 - /> 189 - ); 190 - };