53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { Card, Typography } from "poyraz-ui/atoms";
|
|
import { YOUTUBE_VIDEO_LINKS } from "@/data/youtube-videos";
|
|
|
|
function getYoutubeEmbedUrl(link: string) {
|
|
try {
|
|
const url = new URL(link);
|
|
const videoId = url.searchParams.get("v");
|
|
return videoId ? `https://www.youtube.com/embed/${videoId}` : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export function HomeVideosSection() {
|
|
return (
|
|
<section className="space-y-2">
|
|
<Typography variant="large" className="text-base">
|
|
YouTube
|
|
</Typography>
|
|
|
|
<div className="grid gap-2 md:grid-cols-3">
|
|
{YOUTUBE_VIDEO_LINKS.map((link) => {
|
|
const embedUrl = getYoutubeEmbedUrl(link);
|
|
|
|
return (
|
|
<Card key={link} className="overflow-hidden rounded-sm border-border p-0">
|
|
{embedUrl ? (
|
|
<div className="aspect-video w-full">
|
|
<iframe
|
|
src={embedUrl}
|
|
title="YouTube video player"
|
|
className="h-full w-full"
|
|
loading="lazy"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerPolicy="strict-origin-when-cross-origin"
|
|
allowFullScreen
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="p-3">
|
|
<Typography variant="small" className="text-muted-foreground">
|
|
Invalid video link.
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|