114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useState } from "react";
|
|
import { useSession } from "../lib/session";
|
|
|
|
interface SamShellProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
icon?: string;
|
|
activeHref?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
// Plantilla estilo sam-portal: sidebar colapsable 78px <-> 250px,
|
|
// iconos boxicons, hero con degradado y perfil con salida.
|
|
export default function SamShell({ title, subtitle, icon = "bx-layer", activeHref, children }: SamShellProps) {
|
|
const [open, setOpen] = useState(true);
|
|
const { user, loading, logout } = useSession();
|
|
const router = useRouter();
|
|
|
|
const menu = [
|
|
{ href: "/", label: "Mis cursos", icon: "bx-home" },
|
|
{ href: "/rendir", label: "Rendir", icon: "bx-pencil" },
|
|
{ href: "/resultados", label: "Mis resultados", icon: "bx-bar-chart-alt-2" }
|
|
];
|
|
|
|
const salir = async () => {
|
|
await logout();
|
|
router.push("/login");
|
|
};
|
|
|
|
return (
|
|
<div className={`sam-shell${open ? " open" : ""}`}>
|
|
<div className="sam-sidebar">
|
|
<div className="logo-details">
|
|
<span className="logo_name">
|
|
<Image src="/favicon.png" alt="SAM" width={28} height={28} />
|
|
<span className="brand-text">Pruebas</span>
|
|
</span>
|
|
<i
|
|
className={`bx ${open ? "bx-menu-alt-right" : "bx-menu"}`}
|
|
id="btn"
|
|
onClick={() => setOpen(!open)}
|
|
role="button"
|
|
aria-label="Alternar menú"
|
|
/>
|
|
</div>
|
|
<ul className="nav-list">
|
|
{menu.map((item) => (
|
|
<li key={item.href}>
|
|
<Link href={item.href} className={activeHref === item.href ? "active" : ""}>
|
|
<i className={`bx ${item.icon}`} />
|
|
<span className="links_name">{item.label}</span>
|
|
</Link>
|
|
<span className="tooltip">{item.label}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="profile">
|
|
<div className="profile-details">
|
|
<i className="bx bx-user-circle" />
|
|
<div className="name_job">
|
|
<div className="name">{loading ? "…" : user ? `${user.nombres} ${user.apPaterno}` : "Invitado"}</div>
|
|
<div className="job">{user ? user.email : "SAM Pruebas"}</div>
|
|
</div>
|
|
{user && (
|
|
<i
|
|
className="bx bx-log-out ms-auto"
|
|
role="button"
|
|
title="Cerrar sesión"
|
|
onClick={salir}
|
|
style={{ fontSize: "1.4rem", cursor: "pointer" }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section className="home-section">
|
|
<div className="container-fluid">
|
|
<div className="row sam-toolbar sam-hero align-items-center mb-3">
|
|
<div className="col-md-7">
|
|
<div className="sam-hero-main">
|
|
<span className="sam-hero-icon">
|
|
<i className={`bx ${icon}`} />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<span className="sam-eyebrow">SAM Pruebas · ICHN</span>
|
|
<h5 className="mb-0 fw-bold">{title}</h5>
|
|
{subtitle && <small className="sam-hero-sub">{subtitle}</small>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-5 text-end">
|
|
{user && (
|
|
<div className="sam-hero-side">
|
|
<span>
|
|
<i className="bx bx-user me-1" />
|
|
{user.nombres} {user.apPaterno}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|