Components
Loading preview...
This file contains the reusable VideoGeneratorCard component. It's built with shadcn/ui primitives and is fully typed with TypeScript. Props like storyboardImages, initialPrompt, onGenerate, and isLoading make it flexible for various use cases.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/video-generator-cardimport * as React from "react"
import { VideoGeneratorCard } from "@/components/ui/video-generator-card"
export default function VideoGeneratorCardDemo() {
const [isLoading, setIsLoading] = React.useState(false);
// Sample data for the storyboard images
const storyboardImages = [
{
src: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-7265ae2FvvY1NECu1e4sxmOs1Q6s7h.png&w=1000&q=75',
alt: 'A person in green pants sitting with knees to chest.',
},
{
src: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-hhPaKmoyd4nBebxrwYPSULnJ8GUjow.png&w=320&q=75',
alt: 'A person in a white dress standing against an orange background.',
},
{
src: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-faPseNwO03Gngr7lQUwgpQcs4z52Yw.png&w=1000&q=75',
alt: 'A person in a red and white skirt stretching on an orange couch.',
},
];
const initialPrompt = "Use the storyboard uploaded to create an advertising retro short video in 30 seconds.";
// Handler for the generate action
const handleGenerate = (prompt: string) => {
console.log("Generating video with prompt:", prompt);
setIsLoading(true);
// Simulate an API call
setTimeout(() => {
setIsLoading(false);
alert("Video generation started!");
}, 2000);
};
// Handler for the close action
const handleClose = () => {
alert("Close button clicked!");
};
return (
<div className="flex items-center justify-center w-full h-[600px] bg-background"
style={{
backgroundImage: 'radial-gradient(circle at top left, hsl(var(--primary)/0.1), transparent 40%), radial-gradient(circle at bottom right, hsl(var(--primary)/0.1), transparent 40%)',
}}>
<VideoGeneratorCard
storyboardImages={storyboardImages}
initialPrompt={initialPrompt}
isLoading={isLoading}
onGenerate={handleGenerate}
onClose={handleClose}
/>
</div>
)
}