forked from emre/www_projectmycelium_com
sasha-astiadi
a73608ce6c
- Separated HomeAurora into pure background component and new HomeHero for content - Converted aurora to absolute positioned background layer in Layout for homepage - Removed z-index conflicts and cleaned up background color declarations
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { Link, useLocation } from 'react-router-dom'
|
|
import { Dropdown } from './ui/Dropdown'
|
|
import { ChevronDownIcon } from '@heroicons/react/20/solid'
|
|
import { Container } from './Container'
|
|
import { Button } from './Button'
|
|
import pmyceliumLogo from '../images/logos/logo_1.png'
|
|
|
|
|
|
const cloudNavItems = [
|
|
{ name: 'Cloud', href: '/cloud' },
|
|
{ name: 'Compute', href: '/compute' },
|
|
{ name: 'Storage', href: '/storage' },
|
|
{ name: 'GPU', href: '/gpu' },
|
|
]
|
|
|
|
export function Header() {
|
|
const location = useLocation()
|
|
|
|
const getCurrentPageName = () => {
|
|
const currentPath = location.pathname;
|
|
if (currentPath.startsWith('/compute')) return 'Compute';
|
|
if (currentPath.startsWith('/storage')) return 'Storage';
|
|
if (currentPath.startsWith('/gpu')) return 'GPU';
|
|
if (currentPath.startsWith('/cloud')) return 'Cloud';
|
|
return 'Cloud';
|
|
};
|
|
|
|
return (
|
|
<header className="bg-transparent">
|
|
<nav>
|
|
<Container className="flex bg-transparent justify-between py-4">
|
|
<div className="relative z-10 flex items-center gap-16">
|
|
<Link to="/" aria-label="Home">
|
|
<img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
|
|
</Link>
|
|
<div className="hidden lg:flex lg:gap-10">
|
|
<Dropdown
|
|
buttonContent={
|
|
<>
|
|
{getCurrentPageName()}
|
|
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
|
</>
|
|
}
|
|
items={cloudNavItems}
|
|
/>
|
|
<Link
|
|
to="/network"
|
|
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
|
>
|
|
Network
|
|
</Link>
|
|
<Link
|
|
to="/agents"
|
|
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
|
>
|
|
Agents
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-6">
|
|
<div className="flex items-center gap-6 max-lg:hidden">
|
|
<Button
|
|
to="https://myceliumcloud.tf"
|
|
variant="outline"
|
|
as="a"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Start Deployment
|
|
</Button>
|
|
<Button to="/download" variant="solid" color="cyan">
|
|
Get Mycelium Connector
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</nav>
|
|
</header>
|
|
)
|
|
}
|