Subject Management System - Copy this React, Tailwind Component to your project

'use client'; import { useState } from 'react'; import { Plus, Edit, Trash } from 'lucide-react'; import { Button } from '~/components/admin/ui/button'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from '~/components/admin/ui/dialog'; import { Input } from '~/components/admin/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '~/components/admin/ui/table'; import MateriaForm from '~/components/admin/ui/Materiaform'; interface Materia { id: number; nombre: string; descripcion: string; estado: string; docente: string; nivel: string; } export default function GestionMaterias() { const [materias, setMaterias] = useState<Materia[]>([ { id: 1, nombre: 'Matemáticas Avanzadas', descripcion: 'Curso de álgebra y cálculo.', estado: 'Activo', docente: 'Juan Pérez', nivel: 'Universidad', }, { id: 2, nombre: 'Historia Universal', descripcion: 'Estudio de eventos históricos.', estado: 'Inactivo', docente: 'María Gómez', nivel: 'Secundaria', }, ]); const handleAddMateria = (nuevaMateria: Omit<Materia, 'id'>) => { setMaterias([...materias, { ...nuevaMateria, id: materias.length + 1 }]); }; return ( <div className="space-y-6"> <h2 className="text-3xl font-bold tracking-tight">Gestión de Materias</h2> <div className="flex items-center justify-between"> <Input placeholder="Buscar materias..." className="max-w-sm" /> <Dialog> <DialogTrigger asChild> <Button> <Plus className="mr-2" /> Crear Materia </Button> </DialogTrigger> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>Crear Nueva Materia</DialogTitle> </DialogHeader> <MateriaForm onSubmit={handleAddMateria} /> </DialogContent> </Dialog> </div> <Table> <TableHeader> <TableRow> <TableHead>Nombre</TableHead> <TableHead>Descripción</TableHead> <TableHead>Estado</TableHead> <TableHead>Docente</TableHead> <TableHead>Nivel</TableHead> <TableHead>Acciones</TableHead> </TableRow> </TableHeader> <TableBody> {materias.map((materia) => ( <TableRow key={materia.id}> <TableCell>{materia.nombre}</TableCell> <TableCell>{materia.descripcion}</TableCell> <TableCell>{materia.estado}</TableCell> <TableCell>{materia.docente}</TableCell> <TableCell>{materia.nivel}</TableCell> <TableCell> <Button variant="outline" className="mr-2"> <Edit className="mr-1" /> Editar </Button> <Button variant="outline" className="text-red-500"> <Trash className="mr-1" /> Eliminar </Button> </TableCell> </TableRow> ))} </TableBody> </Table> </div> ); }