Modificar layout para que el usuario pueda tener multiples horarios

src/App.tsx

@@ -32,7 +32,7 @@ function App() {
                     </span>
                 </div>
             </Show>
-            <br/>
+            <div style={{width: "100%", height: "0.5rem"}}/>
             <ContenedorHorarios/>
         </div>
     );

src/ContenedorHorarios/BotonIcono.tsx

@@ -0,0 +1,23 @@
+import { css } from "aphrodite";
+import { estilosGlobales } from "../Estilos";
+
+interface BotonMaxMinProps {
+    icono: string,
+    titulo: string,
+    onClick: () => void
+}
+
+export function BotonIcono(props: BotonMaxMinProps) {
+    return <div title={props.titulo}
+                onClick={props.onClick}
+                className={css(
+                    estilosGlobales.contenedor,
+                    estilosGlobales.inlineBlock,
+                    estilosGlobales.contenedorCursor,
+                    estilosGlobales.contenedorCursorSoft,
+                    estilosGlobales.contenedorPhospor
+                )}
+    >
+        <i className={css(estilosGlobales.botonPhospor) + " " + props.icono}/>
+    </div>
+}

src/ContenedorHorarios/Horarios.tsx

@@ -49,6 +49,14 @@ export function Horarios(props: HorariosProps) {
     return <div>
         <Switch>
             <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxHorarios"}>
+                <div>
+                    <div className={css(
+                        estilosGlobales.inlineBlock,
+                        estilosGlobales.contenedor
+                    )}>
+                        Horarios disponibles
+                    </div>
+                </div>
                 {elAnios}
                 |
                 <BotonMaxMin

src/ContenedorHorarios/MiHorario.tsx

@@ -5,6 +5,7 @@ import { mostrarDescansos } from "../Store";
 import { EstadoLayout } from "./ContenedorHorarios";
 import { Switch, Match, For, createMemo } from "solid-js";
 import { BotonMaxMin } from "./BotonMaxMin";
+import { BotonIcono } from "./BotonIcono";
 import { AnioData, ListaCursosUsuario } from "../types/DatosHorario";
 
 interface MiHorarioProps {
@@ -60,6 +61,7 @@ export function MiHorario(props: MiHorarioProps) {
     return <div>
         <Switch>
             <Match when={props.estadoLayout === "Normal" || props.estadoLayout === "MaxPersonal"}>
+
                 <div>
                     <div className={css(
                         estilosGlobales.inlineBlock,
@@ -67,6 +69,26 @@ export function MiHorario(props: MiHorarioProps) {
                     )}>
                         Mi horario
                     </div>
+                    <div className={css(
+                        estilosGlobales.inlineBlock,
+                        estilosGlobales.contenedor
+                    )}>
+                        Opcion 2
+                    </div>
+                </div>
+
+                <div>
+                    <div className={css(
+                        estilosGlobales.inlineBlock,
+                        estilosGlobales.contenedor
+                    )}>
+                        Mi horario
+                    </div>
+                    |
+                    <BotonIcono titulo={"Nuevo horario en blanco"} icono={"ph-plus"} onClick={() => {}}/>
+                    <BotonIcono titulo={"Reiniciar horario"} icono={"ph-arrow-counter-clockwise"} onClick={() => {}}/>
+                    <BotonIcono titulo={"Duplicar horario"} icono={"ph-copy"} onClick={() => {}}/>
+                    <BotonIcono titulo={"Eliminar horario"} icono={"ph-trash"} onClick={() => {}}/>
                     |
                     <BotonMaxMin
                         fnMaximizar={fnMaximizar}