Skip to content

Commit 344114c

Browse files
hasparushasparus
committed
Improve hover style
1 parent 77ca7a5 commit 344114c

File tree

2 files changed

+80
-78
lines changed

2 files changed

+80
-78
lines changed

‎src/app/conf/2025/schedule/_components/schedule-list.tsx

Lines changed: 2 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,14 @@
33
import { format, parseISO, compareAsc } from "date-fns"
44
import { ReactElement, useEffect, useState } from "react"
55

6-
import { getEventTitle } from "@/app/conf/2023/utils"
7-
import { SchedSpeaker } from "@/app/conf/2023/types"
8-
96
import { Filters, ResetFiltersButton } from "./filters"
107
import {
118
type ScheduleSession,
129
CategoryName,
1310
ConcurrentSessions,
1411
ScheduleSessionsByDay,
1512
} from "./session-list"
16-
import { PinIcon } from "../../pixelarticons/pin-icon"
17-
import { Tag } from "@/app/conf/_design-system/tag"
18-
19-
function isString(x: any) {
20-
return Object.prototype.toString.call(x) === "[object String]"
21-
}
13+
import { ScheduleSessionCard } from "./schedule-session-card"
2214

2315
function getSessionsByDay(
2416
scheduleData: ScheduleSession[],
@@ -187,7 +179,7 @@ export function ScheduleList({
187179
</div>
188180
<div className="relative flex w-full flex-col items-end lg:flex-row lg:items-start lg:gap-px">
189181
{sessions.map(session => (
190-
<ScheduleSession
182+
<ScheduleSessionCard
191183
key={session.id}
192184
session={session}
193185
showEventType={showEventType}
@@ -209,74 +201,6 @@ export function ScheduleList({
209201
)
210202
}
211203

212-
function ScheduleSession({
213-
session,
214-
showEventType,
215-
year,
216-
eventsColors,
217-
}: {
218-
session: ScheduleSession
219-
showEventType: boolean | undefined
220-
year: "2025" | "2024"
221-
eventsColors: Record<string, string>
222-
}) {
223-
const eventType = session.event_type.endsWith("s")
224-
? session.event_type.slice(0, -1)
225-
: session.event_type
226-
227-
const speakers = session.speakers
228-
const formattedSpeakers = isString(speakers || [])
229-
? (speakers as string)?.split(",")
230-
: (speakers as SchedSpeaker[])?.map(e => e.name)
231-
232-
const eventTitle = getEventTitle(
233-
// @ts-expect-error fixme
234-
session,
235-
formattedSpeakers,
236-
)
237-
238-
const eventColor = eventsColors[session.event_type]
239-
240-
return session.event_type === "Breaks" ? (
241-
<div className="flex size-full items-center bg-neu-0 px-4 py-2 font-normal">
242-
{showEventType ? eventType + " / " : ""}
243-
{eventTitle}
244-
</div>
245-
) : (
246-
<a
247-
id={`session-${session.id}`}
248-
data-tooltip-id="my-tooltip"
249-
href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
250-
className="group relative size-full bg-neu-0 p-4 font-normal no-underline focus-visible:z-[1] max-lg:mt-px"
251-
>
252-
<span className="flex h-full flex-col justify-start">
253-
{eventColor && (
254-
<Tag className="mb-3" color={eventColor}>
255-
{eventType}
256-
</Tag>
257-
)}
258-
<span className="flex h-full flex-col justify-between gap-y-2">
259-
{showEventType ? eventType + " / " : ""}
260-
<span className="typography-body-md group-hover:underline">
261-
{eventTitle}
262-
</span>
263-
<span className="flex flex-col">
264-
{(speakers?.length || 0) > 0 && (
265-
<span className="typography-body-sm">
266-
{formattedSpeakers.join(", ")}
267-
</span>
268-
)}
269-
<span className="mt-2 flex items-center gap-0.5 typography-body-xs">
270-
<PinIcon className="size-4 text-pri-base" />
271-
{session.venue}
272-
</span>
273-
</span>
274-
</span>
275-
</span>
276-
</a>
277-
)
278-
}
279-
280204
function BookmarkOnSched() {
281205
return (
282206
<a

‎src/app/conf/2025/schedule/_components/schedule-session-card.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { getEventTitle } from "@/app/conf/2023/utils"
2+
import { SchedSpeaker } from "@/app/conf/2023/types"
3+
4+
import { PinIcon } from "../../pixelarticons/pin-icon"
5+
import { Tag } from "@/app/conf/_design-system/tag"
6+
7+
import { type ScheduleSession } from "./session-list"
8+
9+
function isString(x: any) {
10+
return Object.prototype.toString.call(x) === "[object String]"
11+
}
12+
13+
export function ScheduleSessionCard({
14+
session,
15+
showEventType,
16+
year,
17+
eventsColors,
18+
}: {
19+
session: ScheduleSession
20+
showEventType: boolean | undefined
21+
year: "2025" | "2024"
22+
eventsColors: Record<string, string>
23+
}) {
24+
const eventType = session.event_type.endsWith("s")
25+
? session.event_type.slice(0, -1)
26+
: session.event_type
27+
28+
const speakers = session.speakers
29+
const formattedSpeakers = isString(speakers || [])
30+
? (speakers as string)?.split(",")
31+
: (speakers as SchedSpeaker[])?.map(e => e.name)
32+
33+
const eventTitle = getEventTitle(
34+
// @ts-expect-error fixme
35+
session,
36+
formattedSpeakers,
37+
)
38+
39+
const eventColor = eventsColors[session.event_type]
40+
41+
return session.event_type === "Breaks" ? (
42+
<div className="flex size-full items-center bg-neu-0 px-4 py-2 font-normal">
43+
{showEventType ? eventType + " / " : ""}
44+
{eventTitle}
45+
</div>
46+
) : (
47+
<a
48+
id={`session-${session.id}`}
49+
data-tooltip-id="my-tooltip"
50+
href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
51+
className="group relative size-full bg-neu-0 p-4 font-normal no-underline ring-neu-400 hover:bg-neu-0/90 hover:ring-1 focus-visible:z-[1] dark:ring-neu-100 dark:hover:bg-neu-0/80 max-lg:mt-px"
52+
>
53+
<span className="flex h-full flex-col justify-start">
54+
{eventColor && (
55+
<Tag className="mb-3" color={eventColor}>
56+
{eventType}
57+
</Tag>
58+
)}
59+
<span className="flex h-full flex-col justify-between gap-y-2">
60+
{showEventType ? eventType + " / " : ""}
61+
<span className="typography-body-md">{eventTitle}</span>
62+
<span className="flex flex-col">
63+
{(speakers?.length || 0) > 0 && (
64+
<span className="typography-body-sm">
65+
{/* todo: link to speakers (anchor background on z-index above the main link layer) */}
66+
{formattedSpeakers.join(", ")}
67+
</span>
68+
)}
69+
<span className="mt-2 flex items-center gap-0.5 typography-body-xs">
70+
<PinIcon className="size-4 text-pri-base" />
71+
{session.venue}
72+
</span>
73+
</span>
74+
</span>
75+
</span>
76+
</a>
77+
)
78+
}

0 commit comments

Comments
 (0)