Guillermo.Arrieta/acad-ia-2
1
0
Fork 0
Code Issues 16 Pull Requests Actions Wiki Activity

Dashboard v1 y configuraciones adicionales de prettier

Browse Source
This commit is contained in:
Guillermo Arrieta Medina
2025-12-18 19:49:50 -06:00
parent e40ea49031
commit ad197c9aad
11 changed files with 1825 additions and 6007 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Header.tsx
View File

@@ -8,10 +8,11 @@ export default function Header() {
return (
<>
<header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
{/* Cambiar el color de fondo por bg-background/40 y agregar backdrop-blur para efecto glassmorphism */}
<header className="sticky top-0 z-50 flex w-full items-center bg-gray-800 p-4 text-white shadow-lg">
<button
onClick={() => setIsOpen(true)}
className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
className="rounded-lg p-2 transition-colors hover:bg-gray-700"
aria-label="Open menu"
>
<Menu size={24} />
@@ -28,26 +29,26 @@ export default function Header() {
</header>
<aside
className={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
className={`fixed top-0 left-0 z-50 flex h-full w-80 transform flex-col bg-gray-900 text-white shadow-2xl transition-transform duration-300 ease-in-out ${
isOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="flex items-center justify-between p-4 border-b border-gray-700">
<div className="flex items-center justify-between border-b border-gray-700 p-4">
<h2 className="text-xl font-bold">Navigation</h2>
<button
onClick={() => setIsOpen(false)}
className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
className="rounded-lg p-2 transition-colors hover:bg-gray-800"
aria-label="Close menu"
>
<X size={24} />
</button>
</div>
<nav className="flex-1 p-4 overflow-y-auto">
<nav className="flex-1 overflow-y-auto p-4">
<Link
to="/"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
className="mb-2 flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-gray-800"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
@@ -62,7 +63,7 @@ export default function Header() {
<Link
to="/demo/tanstack-query"
onClick={() => setIsOpen(false)}
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
className="mb-2 flex items-center gap-3 rounded-lg p-3 transition-colors hover:bg-gray-800"
activeProps={{
className:
'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',