Gh

Gg

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+interface Video {
+  id: number;
+  scene: string;
+  imageUrl: string;
+}
+
+const videos: Video[] = [
+    {
+        id: 1,
+        scene: 'Beach Scene',
+        imageUrl: 'https://placehold.co/200x300/cccccc/ffffff?text=Scene+1'
+    },
+    {
+        id: 2,
+        scene: 'Bedroom Scene',
+        imageUrl: 'https://placehold.co/200x300/dddddd/333333?text=Scene+2'
+
+    },
+    {
+        id: 3,
+        scene: 'Pool Scene',
+        imageUrl: 'https://placehold.co/200x300/eeeeee/555555?text=Scene+3'
+    },
+    {
+        id: 4,
+        scene: 'Bathroom Scene',
+        imageUrl: 'https://placehold.co/200x300/fafafa/777777?text=Scene+4'
+    },
+    {
+        id: 5,
+        scene: 'Kitchen Scene',
+        imageUrl: 'https://placehold.co/200x300/f0f0f0/999999?text=Scene+5'
+    }
+];
+
+// Extracted VideoCard Component
+const VideoCard: React.FC<{ video: Video; onClick: (video: Video) => void }> = ({ video, onClick }) => {
+    return (
+        <div
+            onClick={() => onClick(video)}
+            className="cursor-pointer rounded-xl overflow-hidden shadow-md transition-shadow duration-300 hover:shadow-xl bg-white"
+        >
+            <div className="aspect-w-2 aspect-h-3">
+            <img
+                src={video.imageUrl}
+                alt={video.scene}
+                className="w-full h-full object-cover"
+             />
+            </div>
+            <div className="p-4">
+                <h2 className="text-lg font-semibold text-gray-700">{video.scene}</h2>
+            </div>
+        </div>
+    );
+};
+
+const App: React.FC = () => {
+    const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
+
+    const handleVideoClick = (video: Video) => {
+        setSelectedVideo(video);
+    };
+
+    const handleCreateVideo = () => {
+        alert(`Video of scene ${selectedVideo?.scene} created!`); // Placehoder for actual video generation
+    };
+
+    return (
+        <div className="flex flex-col items-center p-4 bg-gray-100 min-h-screen">
+            <h1 className="text-2xl font-bold mb-8 text-gray-800">10 Second Video Creator</h1>
+            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
+                {videos.map((video) => (
+                    <VideoCard key={video.id} video={video} onClick={handleVideoClick} />
+                ))}
+            </div>
+            {selectedVideo && (
+                <div className="bg-white p-6 rounded-xl shadow-md w-full max-w-md">
+                    <h2 className="text-xl font-semibold mb-4 text-gray-800">Preview</h2>
+                    <div className="aspect-w-16 aspect-h-9 overflow-hidden rounded-md">
+                        <img src={selectedVideo.imageUrl} alt={selectedVideo.scene} className="object-cover" />
+                    </div>
+
+                    <p className="mt-4 text-gray-700">Scene: {selectedVideo.scene}</p>
+                    <p className="text-gray-600 text-sm mt-2">Duration: 10 seconds</p>
+                    <button
+                        onClick={handleCreateVideo}
+                        className="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+                        Create Video
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default App;