init

2026-04-28 09:27:54 +07:00
commit 68d05da584
320 changed files with 26229 additions and 0 deletions
@@ -0,0 +1,28 @@
+import React from "react";
+import YouTubeEmbed from "./YouTubeEmbed";
+import ComponentCard from "@/components/common/ComponentCard";
+
+export default function VideosExample() {
+  return (
+    <div>
+      <div className="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-2">
+        <div className="space-y-5 sm:space-y-6">
+          <ComponentCard title="Video Ratio 16:9">
+            <YouTubeEmbed videoId="dQw4w9WgXcQ" />
+          </ComponentCard>
+          <ComponentCard title="Video Ratio 4:3">
+            <YouTubeEmbed videoId="dQw4w9WgXcQ" aspectRatio="4:3" />
+          </ComponentCard>
+        </div>
+        <div className="space-y-5 sm:space-y-6">
+          <ComponentCard title="Video Ratio 21:9">
+            <YouTubeEmbed videoId="dQw4w9WgXcQ" aspectRatio="21:9" />
+          </ComponentCard>
+          <ComponentCard title="Video Ratio 1:1">
+            <YouTubeEmbed videoId="dQw4w9WgXcQ" aspectRatio="1:1" />
+          </ComponentCard>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,41 @@
+import React from "react";
+
+type AspectRatio = "16:9" | "4:3" | "21:9" | "1:1";
+
+interface YouTubeEmbedProps {
+  videoId: string;
+  aspectRatio?: AspectRatio;
+  title?: string;
+  className?: string;
+}
+
+const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({
+  videoId,
+  aspectRatio = "16:9",
+  title = "YouTube video",
+  className = "",
+}) => {
+  const aspectRatioClass = {
+    "16:9": "aspect-video",
+    "4:3": "aspect-4/3",
+    "21:9": "aspect-21/9",
+    "1:1": "aspect-square",
+  }[aspectRatio];
+
+  return (
+    <div
+      className={`overflow-hidden rounded-lg ${aspectRatioClass} ${className}`}
+    >
+      <iframe
+        src={`https://www.youtube.com/embed/${videoId}`}
+        title={title}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        className="w-full h-full"
+      ></iframe>
+    </div>
+  );
+};
+
+export default YouTubeEmbed;