this repo has no description
atmosphereconf-vods.wisp.place/
fix layout shift
+42
-44
+42
-44
src/routes/tracks.$trackSlug.tsx
+42
-44
src/routes/tracks.$trackSlug.tsx
···
1
-
import { createFileRoute, Link } from "@tanstack/react-router";
1
+
import { createFileRoute, createLink, Link } from "@tanstack/react-router";
2
2
import * as stylex from "@stylexjs/stylex";
3
3
import { Info } from "lucide-react";
4
4
···
28
28
getTrackBySlug,
29
29
} from "#/lib/conference";
30
30
import { Body } from "#/components/typography";
31
+
32
+
const CardLink = createLink(Card);
31
33
32
34
export const Route = createFileRoute("/tracks/$trackSlug")({
33
35
component: TrackRouteComponent,
···
106
108
borderBottomStyle: "solid",
107
109
borderBottomWidth: 1,
108
110
},
109
-
sessionLink: {
111
+
sessionCard: {
110
112
textDecoration: "none",
111
113
color: "inherit",
112
-
},
113
-
sessionCard: {
114
114
backgroundColor: uiColor.bgSubtle,
115
115
borderColor: uiColor.border2,
116
116
},
···
211
211
</Flex>
212
212
213
213
{sessions.map((session) => (
214
-
<Link
214
+
<CardLink
215
215
key={session.id}
216
216
to="/videos/$videoSlug"
217
217
params={{ videoSlug: session.slug }}
218
218
search={{ autoplay: false }}
219
-
{...stylex.props(styles.sessionLink)}
219
+
style={styles.sessionCard}
220
220
>
221
-
<Card style={styles.sessionCard}>
222
-
<CardHeader>
223
-
<CardTitle>{session.title}</CardTitle>
224
-
<CardHeaderAction>
225
-
<div {...stylex.props(styles.headerMeta)}>
226
-
{!session.recordUri ? (
227
-
<Tooltip text="This session appears in the schedule, but no recording is available.">
228
-
<span
229
-
aria-label="No recording available"
230
-
{...stylex.props(styles.missingRecordingIcon)}
231
-
>
232
-
<Info size={16} />
233
-
</span>
234
-
</Tooltip>
235
-
) : null}
236
-
<Text size="sm" style={styles.timeBadge}>
237
-
{formatLocalTime(session.startsAt)} -{" "}
238
-
{formatLocalTime(session.endsAt)}
239
-
</Text>
240
-
</div>
241
-
</CardHeaderAction>
242
-
</CardHeader>
243
-
<CardBody>
244
-
<Flex direction="column" gap="4xl">
245
-
<Body>{session.description}</Body>
246
-
<div {...stylex.props(styles.sessionBody)}>
247
-
{session.speakerProfiles.length > 0 ? (
248
-
<SpeakerList
249
-
speakers={session.speakerProfiles}
250
-
wrap
251
-
surface
252
-
/>
253
-
) : null}
254
-
</div>
255
-
</Flex>
256
-
</CardBody>
257
-
</Card>
258
-
</Link>
221
+
<CardHeader>
222
+
<CardTitle>{session.title}</CardTitle>
223
+
<CardHeaderAction>
224
+
<div {...stylex.props(styles.headerMeta)}>
225
+
{!session.recordUri ? (
226
+
<Tooltip text="This session appears in the schedule, but no recording is available.">
227
+
<span
228
+
aria-label="No recording available"
229
+
{...stylex.props(styles.missingRecordingIcon)}
230
+
>
231
+
<Info size={16} />
232
+
</span>
233
+
</Tooltip>
234
+
) : null}
235
+
<Text size="sm" style={styles.timeBadge}>
236
+
{formatLocalTime(session.startsAt)} -{" "}
237
+
{formatLocalTime(session.endsAt)}
238
+
</Text>
239
+
</div>
240
+
</CardHeaderAction>
241
+
</CardHeader>
242
+
<CardBody>
243
+
<Flex direction="column" gap="4xl">
244
+
<Body>{session.description}</Body>
245
+
<div {...stylex.props(styles.sessionBody)}>
246
+
{session.speakerProfiles.length > 0 ? (
247
+
<SpeakerList
248
+
speakers={session.speakerProfiles}
249
+
wrap
250
+
surface
251
+
/>
252
+
) : null}
253
+
</div>
254
+
</Flex>
255
+
</CardBody>
256
+
</CardLink>
259
257
))}
260
258
</section>
261
259
))}