40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { Card, Typography } from "poyraz-ui/atoms";
|
||
import { YOUTUBE_VIDEO_LINKS } from "@/data/youtube-videos";
|
||
import { getYoutubeEmbedUrl } from "@/lib/youtube";
|
||
|
||
export function HomeVideosSection() {
|
||
return (
|
||
<section className="space-y-2">
|
||
<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 oynatıcı"
|
||
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">
|
||
Geçersiz video bağlantısı.
|
||
</Typography>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|