Spaces:
Sleeping
Sleeping
File size: 7,415 Bytes
ad08f08 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useTheme } from '../hooks/useTheme';
const MainLayout = ({ children }) => {
const { theme, toggleTheme } = useTheme();
const location = useLocation();
const navigation = [
{ name: 'Home', path: '/' },
{ name: 'News', path: '/news' },
{ name: 'Datasets', path: '/datasets' },
{ name: 'Directory', path: '/directory' },
{ name: 'Matchmaking', path: '/matchmaking' }
];
return (
<div className="min-h-screen bg-gradient-to-br from-green-50 via-blue-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 transition-colors duration-300">
<header className="bg-gradient-to-r from-bio-green via-bio-blue to-bio-purple text-white py-6 px-4 shadow-xl dark:from-gray-800 dark:via-gray-900 dark:to-gray-800 transition-colors duration-300">
<div className="container mx-auto flex justify-between items-center">
<div>
<Link to="/" className="text-3xl md:text-4xl font-bold hover:opacity-90 transition drop-shadow-lg">
<span className="bg-gradient-to-r from-yellow-300 via-green-300 to-blue-300 bg-clip-text text-transparent">
GXS BioNexus Hub
</span>
</Link>
<p className="text-lg mt-1 drop-shadow">
<span className="bg-gradient-to-r from-green-200 to-blue-200 bg-clip-text text-transparent">
Bioeconomy Innovation & FLW Nexus
</span>
</p>
</div>
<div className="flex items-center space-x-4">
<nav className="hidden md:block">
<ul className="flex space-x-6">
{navigation.map((item) => (
<li key={item.path}>
<Link
to={item.path}
className={`hover:text-green-200 transition font-medium drop-shadow ${
location.pathname === item.path
? 'font-bold underline underline-offset-4 decoration-2 bg-gradient-to-r from-yellow-300 to-green-300 bg-clip-text text-transparent'
: 'bg-gradient-to-r from-white to-gray-200 bg-clip-text text-transparent dark:from-gray-100 dark:to-gray-300'
}`}
>
{item.name}
</Link>
</li>
))}
</ul>
</nav>
<button
onClick={toggleTheme}
className="p-2 rounded-full bg-white/20 hover:bg-white/30 transition drop-shadow"
aria-label="Toggle dark mode"
>
{theme === 'light' ? (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
)}
</button>
<button className="md:hidden text-white">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 drop-shadow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</header>
<main>
{children}
</main>
<footer className="bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 text-white py-12 dark:from-gray-900 dark:via-black dark:to-gray-900 transition-colors duration-300">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 className="text-xl font-bold mb-4 drop-shadow">
<span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
GXS BioNexus Hub
</span>
</h3>
<p className="text-gray-400 drop-shadow">Accelerating bioeconomy solutions that reduce food loss & waste.</p>
</div>
<div>
<h4 className="font-bold mb-4 drop-shadow">
<span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
Platform
</span>
</h4>
<ul className="space-y-2 text-gray-400">
<li><Link to="/" className="hover:text-white transition drop-shadow">Home</Link></li>
<li><Link to="/news" className="hover:text-white transition drop-shadow">News Hub</Link></li>
<li><Link to="/datasets" className="hover:text-white transition drop-shadow">Datasets</Link></li>
<li><Link to="/directory" className="hover:text-white transition drop-shadow">Directory</Link></li>
<li><Link to="/matchmaking" className="hover:text-white transition drop-shadow">Matchmaking</Link></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-4 drop-shadow">
<span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
Resources
</span>
</h4>
<ul className="space-y-2 text-gray-400">
<li><a href="#" className="hover:text-white transition drop-shadow">Documentation</a></li>
<li><a href="#" className="hover:text-white transition drop-shadow">API</a></li>
<li><a href="#" className="hover:text-white transition drop-shadow">Community</a></li>
<li><a href="#" className="hover:text-white transition drop-shadow">Blog</a></li>
</ul>
</div>
<div>
<h4 className="font-bold mb-4 drop-shadow">
<span className="bg-gradient-to-r from-green-300 to-blue-300 bg-clip-text text-transparent">
Connect
</span>
</h4>
<ul className="space-y-2 text-gray-400">
<li><a href="#" className="hover:text-white transition drop-shadow">Twitter</a></li>
<li><a href="#" className="hover:text-white transition drop-shadow">LinkedIn</a></li>
<li><a href="#" className="hover:text-white transition drop-shadow">GitHub</a></li>
<li><a href="#" className="hover:text-white transition drop-shadow">Contact</a></li>
</ul>
</div>
</div>
<div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 drop-shadow">
<p>© 2025 GXS BioNexus Hub. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
};
export default MainLayout; |