ourworld_web/www_ourverse_new
21
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit navbar

Browse Source
This commit is contained in:
sasha-astiadi
2024-08-26 14:50:15 +02:00
parent 7c90df8a38
commit 8a5b21c780
229 changed files with 12531 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Button.jsx
View File

@@ -3,7 +3,7 @@ import clsx from 'clsx'
export function Button({ className, ...props }) {
className = clsx(
'inline-flex justify-center rounded-2xl bg-blue-600 p-4 text-base font-semibold text-white hover:bg-blue-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
'inline-flex justify-center rounded-2xl bg-blue-600 py-2 px-4 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:text-white/70',
className,
)

88
src/components/Header.jsx
View File

@@ -1,29 +1,81 @@
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { DiamondIcon } from '@/components/DiamondIcon'
import { Logo } from '@/components/Logo'
'use client'; // Ensure this file is treated as a Client Component
import { useState } from 'react';
import { Button } from '@/components/Button';
import { Container } from '@/components/Container';
import { Logo } from '@/components/Logo';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
// Example navigation items
const navigationItems = [
{ name: 'Home', href: '#' },
{ name: 'About', href: '#' },
{ name: 'Services', href: '#' },
{ name: 'Contact', href: '#' }
];
export function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="relative z-50 flex-none lg:pt-11">
<Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
<div className="mt-10 lg:mt-0 lg:grow lg:basis-0">
<header className="relative z-50 flex-none lg:py-4 bg-white">
<Container className="flex flex-wrap items-center justify-between lg:justify-center lg:flex-nowrap">
<div className="my-5 lg:my-0 lg:grow lg:basis-0">
<Logo className="h-12 w-auto text-slate-900" />
</div>
<div className="order-first -mx-4 flex flex-auto basis-full overflow-x-auto whitespace-nowrap border-b border-blue-600/10 py-4 font-mono text-sm text-blue-600 sm:-mx-6 lg:order-none lg:mx-0 lg:basis-auto lg:border-0 lg:py-0">
<div className="mx-auto flex items-center gap-4 px-4">
<p>
<time dateTime="2022-04-04">04</time>-
<time dateTime="2022-04-06">06 of April, 2022</time>
</p>
<DiamondIcon className="h-1.5 w-1.5 overflow-visible fill-current stroke-current" />
<p>Los Angeles, CA</p>
<div className="hidden lg:flex lg:items-center lg:gap-8 lg:grow lg:basis-0">
<div className="flex gap-8 mx-auto">
{navigationItems.map((item) => (
<a key={item.name} href={item.href} className="text-blue-600 hover:text-blue-800">
{item.name}
</a>
))}
</div>
</div>
<div className="hidden sm:mt-10 sm:flex lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
<Button href="#">Get your tickets</Button>
</div>
<div className="lg:hidden flex items-center">
<button
type="button"
onClick={() => setMobileMenuOpen(true)}
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span className="sr-only">Open menu</span>
<Bars3Icon aria-hidden="true" className="h-6 w-6" />
</button>
</div>
</Container>
{/* Mobile menu */}
{mobileMenuOpen && (
<div className="fixed inset-0 z-10 bg-white shadow-lg lg:hidden">
<div className="flex items-center justify-between p-6">
<Logo className="h-12 w-auto text-slate-900" />
<button
type="button"
onClick={() => setMobileMenuOpen(false)}
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span className="sr-only">Close menu</span>
<XMarkIcon aria-hidden="true" className="h-6 w-6" />
</button>
</div>
<div className="flex flex-col p-6 space-y-4">
{navigationItems.map((item) => (
<a
key={item.name}
href={item.href}
className="text-blue-600 hover:text-blue-800 text-lg font-semibold"
onClick={() => setMobileMenuOpen(false)}
>
{item.name}
</a>
))}
<Button href="#" className="mt-4">
Get your tickets
</Button>
</div>
</div>
)}
</header>
)
);
}