import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; export default function App() { const [tema, setTema] = useState(""); const [cenas, setCenas] = useState(""); const [materiais, setMateriais] = useState(""); const [roteiro, setRoteiro] = useState(""); const gerarRoteiro = () => { const texto = ROTEIRO DE VÍDEO\n\nTema:\n${tema}\n\nCenas:\n${cenas}\n\nMateriais Necessários:\n${materiais}; setRoteiro(texto); }; return ( <div className="min-h-screen bg-gray-100 p-6 flex items-center justify-center"> <Card className="w-full max-w-2xl shadow-xl rounded-2xl"> <CardContent className="p-6 space-y-4"> <h1 className="text-2xl font-bold">Gerador de Roteiro de Vídeo</h1> <Input placeholder="Tema do vídeo" value={tema} onChange={(e) => setTema(e.target.value)} /> <Textarea placeholder="Descreva as cenas" value={cenas} onChange={(e) => setCenas(e.target.value)} /> <Textarea placeholder="Materiais necessários" value={materiais} onChange={(e) => setMateriais(e.target.value)} /> <Button onClick={gerarRoteiro} className="w-full"> Gerar Roteiro </Button> {roteiro && ( <Textarea value={roteiro} readOnly className="h-48" /> )} </CardContent> </Card> </div> ); }