Default Component - Copy this React, Tailwind Component to your project

import { useState } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Select, SelectItem } from "@/components/ui/select"; import { UploadCloud } from "lucide-react"; export default function TicketCreation() { const [category, setCategory] = useState(""); const [description, setDescription] = useState(""); const [file, setFile] = useState(null); return ( <div className="flex items-center justify-center min-h-screen bg-gray-100"> <Card className="w-full max-w-lg p-6 shadow-lg"> <CardHeader> <CardTitle>Crear Nuevo Ticket</CardTitle> </CardHeader> <CardContent> <div className="space-y-4"> <Select value={category} onChange={(e) => setCategory(e.target.value)}> <SelectItem value="">Selecciona una categoría</SelectItem> <SelectItem value="soporte">Soporte Técnico</SelectItem> <SelectItem value="administrativo">Administrativo</SelectItem> <SelectItem value="otro">Otro</SelectItem> </Select> <Textarea placeholder="Describe el problema..." value={description} onChange={(e) => setDescription(e.target.value)} /> <div className="flex items-center gap-2"> <Input type="file" onChange={(e) => setFile(e.target.files[0])} /> <UploadCloud size={24} /> </div> <Button className="w-full">Enviar Ticket</Button> </div> </CardContent> </Card> </div> ); }