Added theme switcher + optimized youtube loading + about changes

frontend/components/youtube-embed.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { IYoutubeItem } from "@/interfaces/youtube";
+import Image from "next/image";
+import { useState } from "react";
+
+export default function YouTubeEmbed({
+	video,
+	width = 424,
+	height = 238,
+	loadIframe = false,
+	autoPlay = true,
+}: {
+	video: IYoutubeItem | string;
+	width?: number | "full";
+	height?: number | "full";
+	loadIframe?: boolean;
+	autoPlay?: boolean;
+}) {
+	const [isIframeLoaded, setIframeLoaded] = useState(loadIframe);
+
+	const isString = typeof video === "string";
+
+	const _loadIframe = () => setIframeLoaded(true);
+
+	return (
+		<div
+			className={`relative w-${width === "full" ? width : "[" + width + "px]"} h-${height === "full" ? height : "[" + height + "px]"} cursor-pointer`}
+			onClick={_loadIframe}
+		>
+			{isIframeLoaded ? (
+				<iframe
+					className="rounded-md shadow-current aspect-video"
+					width={width === "full" ? "100%" : width}
+					height={height === "full" ? "100%" : height}
+					src={`https://www.youtube-nocookie.com/embed/${isString ? video : video.id.videoId}?rel=0&modestbranding=1&autoplay=${autoPlay ? 1 : 0}`}
+					title={
+						isString ? "YouTube video player" : video.snippet.title
+					}
+					allow="accelerometer; autoplay; encrypted-media; gyroscope"
+					allowFullScreen
+				/>
+			) : (
+				<>
+					{width === "full" || height === "full" ? (
+						<img
+							width="100%"
+							height="100%"
+							className="w-full h-full object-cover rounded-md shadow-current"
+							src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
+							alt={
+								isString
+									? "YouTube video player"
+									: video.snippet.title
+							}
+						/>
+					) : (
+						<Image
+							width={width}
+							height={height}
+							className="w-full h-full object-cover rounded-md shadow-current"
+							src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
+							alt={
+								isString
+									? "YouTube video player"
+									: video.snippet.title
+							}
+						/>
+					)}
+
+					<button className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] text-white text-8xl cursor-pointer">
+						▶
+					</button>
+				</>
+			)}
+		</div>
+	);
+}