diff --git a/app/page.tsx b/app/page.tsx index 2ed5761..3f27958 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,4 +1,5 @@ import { HomeHero } from "@/components/home-hero"; +import { HomeVideosSection } from "@/components/home-videos-section"; import { ReferencesSection } from "@/components/references-section"; export default function Home() { @@ -6,6 +7,7 @@ export default function Home() { + ); } diff --git a/components/home-videos-section.tsx b/components/home-videos-section.tsx new file mode 100644 index 0000000..1ab2632 --- /dev/null +++ b/components/home-videos-section.tsx @@ -0,0 +1,52 @@ +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 ( + + + YouTube + + + + {YOUTUBE_VIDEO_LINKS.map((link) => { + const embedUrl = getYoutubeEmbedUrl(link); + + return ( + + {embedUrl ? ( + + + + ) : ( + + + Invalid video link. + + + )} + + ); + })} + + + ); +} diff --git a/data/youtube-videos.ts b/data/youtube-videos.ts new file mode 100644 index 0000000..ee923fe --- /dev/null +++ b/data/youtube-videos.ts @@ -0,0 +1,5 @@ +export const YOUTUBE_VIDEO_LINKS = [ + "https://www.youtube.com/watch?v=9JEOGCX5aSQ&t=22s", + "https://www.youtube.com/watch?v=H8sP8HejI7A", + "https://www.youtube.com/watch?v=XWUeVzf0t6Y&t=2s", +] as const;