Files
acad-ia-2/src/components/asignaturas/detalle/contenido-tematico/EditTemaDialog.tsx

62 lines
1.4 KiB
TypeScript

import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { Button } from '@/components/ui/button'
import { useState } from 'react'
export function EditTemaDialog({
children,
temaId,
defaultValue,
horas,
}: {
children: React.ReactNode
temaId: string
defaultValue: string
horas: number
}) {
const [open, setOpen] = useState(false)
const [value, setValue] = useState(defaultValue)
function handleSave() {
console.log('Guardar tema', temaId, value)
setOpen(false)
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<div onClick={() => setOpen(true)}>{children}</div>
<DialogContent>
<DialogHeader>
<DialogTitle>Editar tema</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<Textarea
value={value}
onChange={(e) => setValue(e.target.value)}
rows={4}
/>
<p className="text-sm text-muted-foreground">
Horas asignadas: {horas}
</p>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setOpen(false)}>
Cancelar
</Button>
<Button onClick={handleSave}>Guardar</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}