Se agregan tabs de asignaturas

src/components/asignaturas/detalle/contenido-tematico/EditTemaDialog.tsx

@@ -0,0 +1,61 @@
+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>
+  )
+}