49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import { ButtonLink } from './button';
|
|
import { YouTube } from './youtube.component';
|
|
|
|
export interface CourseVideoProps {
|
|
/**
|
|
* The YouTube video URL
|
|
*/
|
|
src: string;
|
|
courseTitle: string;
|
|
courseUrl: string;
|
|
}
|
|
|
|
export function CourseVideo({
|
|
src: videoUrl,
|
|
courseTitle,
|
|
courseUrl,
|
|
}: CourseVideoProps): JSX.Element {
|
|
return (
|
|
<div className="not-prose mx-auto max-w-4xl">
|
|
<div className="overflow-hidden rounded-xl bg-slate-50 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-800/50 dark:ring-slate-700/50">
|
|
<div className="aspect-video w-full">
|
|
<YouTube
|
|
src={videoUrl}
|
|
title={courseTitle}
|
|
width="100%"
|
|
disableRoundedCorners={true}
|
|
/>
|
|
</div>
|
|
<div className="px-6 py-4">
|
|
<div className="flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<h3 className="text-center text-xl font-medium text-slate-900 sm:text-left dark:text-white">
|
|
{courseTitle}
|
|
</h3>
|
|
<ButtonLink
|
|
href={courseUrl}
|
|
variant="primary"
|
|
size="small"
|
|
title={`Watch the full "${courseTitle}" course`}
|
|
className="whitespace-nowrap"
|
|
>
|
|
Watch full course
|
|
</ButtonLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|