leaflet.pub
a tool for shared writing and social publishing
refactor to use a single Link element in the LeafletListItem
cozylittle.house
+65
-81
+15
-33
app/(home-pages)/home/LeafletList/LeafletInfo.tsx
+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
+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
+1
-1
app/(home-pages)/home/LeafletList/LeafletOptions.tsx
-14
app/(home-pages)/home/LeafletList/LeafletPreview.tsx
-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
-
};