83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import { Bookmark, User } from "lucide-react";
|
|
|
|
export type SpeakerLine = { name: string; role: "Speaker" | "Moderator" };
|
|
|
|
export type AgendaRowData = {
|
|
time: string;
|
|
duration: string;
|
|
trackTitle: string;
|
|
sessionType: string;
|
|
description: string;
|
|
speakers: SpeakerLine[];
|
|
};
|
|
|
|
function SpeakerLineView({ name, role }: SpeakerLine) {
|
|
const pill =
|
|
role === "Speaker" ? "bg-emerald-50" : "bg-yellow-100";
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-zinc-100">
|
|
<User className="size-3 text-gray-600" strokeWidth={2} />
|
|
</div>
|
|
<span className="text-xs font-medium tracking-wide text-[var(--theme-card-text-color)]">{name}</span>
|
|
</div>
|
|
<span
|
|
className={`rounded px-2 py-0.5 text-[10px] font-normal tracking-wide ${pill}`}
|
|
>
|
|
{role}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type AgendaRowProps = {
|
|
row: AgendaRowData;
|
|
};
|
|
|
|
export function AgendaRow({ row }: AgendaRowProps) {
|
|
return (
|
|
<div className="relative flex gap-2 pb-3">
|
|
<div className="relative z-[1] flex shrink-0 flex-col items-center">
|
|
<div className="flex size-10 items-center justify-center rounded-full bg-[var(--theme-button-color)]/15">
|
|
<User className="size-4 text-[var(--theme-card-text-color)]" strokeWidth={2} />
|
|
</div>
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-2">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex min-w-0 flex-col gap-1 text-[var(--theme-card-text-color)]">
|
|
<div className="flex items-center gap-1 text-[10px] tracking-wide">
|
|
<span>{row.time}</span>
|
|
<span className="h-3 w-px bg-zinc-300" />
|
|
<span>{row.duration}</span>
|
|
</div>
|
|
<h3 className="text-sm font-semibold leading-[22px] tracking-wide">
|
|
{row.trackTitle}
|
|
</h3>
|
|
<div
|
|
className="inline-flex w-fit items-center rounded px-2 py-0.5 text-[10px] tracking-wide bg-zinc-200 text-[var(--theme-card-text-color)]"
|
|
>
|
|
{row.sessionType}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="shrink-0 text-[var(--theme-button-color)]"
|
|
aria-label="Bookmark session"
|
|
>
|
|
<Bookmark className="size-5" strokeWidth={1.75} />
|
|
</button>
|
|
</div>
|
|
<p className="text-xs leading-normal tracking-wide text-[var(--theme-card-text-color)]/80">
|
|
{row.description}
|
|
</p>
|
|
<div className="flex flex-col gap-2">
|
|
{row.speakers.map((s) => (
|
|
<SpeakerLineView key={`${s.name}-${s.role}-${s.name}`} {...s} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|