admin/DoC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: implementar footer con información del proyecto

Browse Source
This commit is contained in:
Alexis
2026-04-13 10:52:28 +02:00
parent b6402f2d59
commit 2be291ca13
2 changed files with 49 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/Footer.jsx
+41
View File
@@ -0,0 +1,41 @@
import React from 'react';
export default function Footer() {
return (
<footer className="bg-white border-t border-slate-200 mt-auto shrink-0">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="py-6 flex flex-col md:flex-row justify-between items-center gap-4">
{/* Información del Proyecto */}
<div className="flex flex-col items-center md:items-start">
<span className="text-sm font-black text-slate-800 tracking-tight">
Deck of Cards
</span>
<span className="text-xs text-slate-500 mt-1 font-medium">
Herramienta Científica de Modelado Difuso
</span>
</div>
{/* Enlaces y Redes */}
<div className="flex items-center gap-6">
<a
href="https://github.com/alexislopez-dev/deck-of-cards"
target="_blank"
rel="noopener noreferrer"
className="text-slate-400 hover:text-slate-800 transition-colors flex items-center gap-2"
aria-label="Ver código fuente en GitHub"
>
<span className="text-xs font-bold uppercase tracking-wider hidden sm:block">
Ver Código
</span>
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</footer>
);
}
frontend/src/components/layout/MainLayout.jsx
+8 -5
View File
@@ -1,6 +1,7 @@
import { useState } from 'react';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';
import Footer from './Footer';
export default function MainLayout({ children }) {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -23,9 +24,10 @@ export default function MainLayout({ children }) {
};
return (
<div className="min-h-screen bg-slate-50 font-sans">
// IMPORTANTE: flex y flex-col son la clave para que el footer se quede abajo
<div className="min-h-screen flex flex-col bg-slate-50 font-sans">
{/* HEADER */}
<header className="bg-white shadow-sm border-b border-slate-200 sticky top-0 z-50">
<header className="bg-white shadow-sm border-b border-slate-200 sticky top-0 z-50 shrink-0">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
{/* Logo / Título */}
@@ -35,8 +37,6 @@ export default function MainLayout({ children }) {
alt="Deck of Cards Logo"
className="w-10 h-10 shadow-sm rounded-xl object-contain"
/>
{/* Texto del título */}
<span className="text-2xl font-black bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600 hidden sm:block">
Deck of Cards
</span>
@@ -129,9 +129,12 @@ export default function MainLayout({ children }) {
</header>
{/* CONTENIDO PRINCIPAL */}
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<main className="flex-1 flex flex-col max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
{children}
</main>
{/* FOOTER */}
<Footer />
</div>
);
}