58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
|
|
import { Image } from "./Image";
|
|
import { Link } from "./Link";
|
|
|
|
import styles from "./TechTalkCard.module.css";
|
|
|
|
interface DownloadLink {
|
|
file: string;
|
|
type: string;
|
|
size?: string;
|
|
}
|
|
|
|
interface TechTalkProps {
|
|
title: string;
|
|
presentors: string[];
|
|
poster: string;
|
|
links: DownloadLink[];
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TechTalkCard({
|
|
title,
|
|
poster,
|
|
presentors,
|
|
links,
|
|
children,
|
|
}: TechTalkProps) {
|
|
return (
|
|
<article className={styles.card}>
|
|
<aside>
|
|
<Image
|
|
alt={`Thumbnail of tech talk by ${presentors.join(", ")}: ${title}`}
|
|
src={poster}
|
|
/>
|
|
</aside>
|
|
<section className={styles.content}>
|
|
<h1>{title}</h1>
|
|
<div>{children}</div>
|
|
|
|
<h2>Download:</h2>
|
|
<ul>
|
|
{links.map((link) => (
|
|
<li key={link.file + link.type}>
|
|
<DownloadLink {...link} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function DownloadLink({ file, type, size }: DownloadLink) {
|
|
const text = size ? `${type} (${size})` : type;
|
|
return <Link href={file}>{text}</Link>;
|
|
}
|