Spaces:
No application file
No application file
File size: 3,313 Bytes
81e07a9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 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; |