77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import 'tippy.js/dist/tippy.css'
|
|
|
|
import { GlobeAltIcon } from '@heroicons/react/20/solid'
|
|
import Tippy from '@tippyjs/react'
|
|
import type { Page, Settings } from 'lib/sanity.queries'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
import { Fade, Slide } from 'react-awesome-reveal'
|
|
|
|
import NavPageItems from './NavPageItems'
|
|
|
|
const LogoGWK = '/images/logogwk.svg'
|
|
|
|
export interface NavbarProps {
|
|
settings: Settings
|
|
}
|
|
|
|
export default function Navbar() {
|
|
const [isOpen, setOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<div className="sticky top-0 z-50 hidden bg-white sm:z-10 sm:block">
|
|
<div className="container mx-auto p-0">
|
|
<div className="flex">
|
|
<div className="md:40 w-40 flex-none sm:w-40">
|
|
<Link href="/">
|
|
<Image
|
|
src={LogoGWK}
|
|
alt="Garuda Wisnu Kencana"
|
|
width={100}
|
|
height={100}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="hidden flex-auto sm:block sm:w-full">
|
|
<div className="pt-10 text-left ">
|
|
<NavPageItems />
|
|
</div>
|
|
</div>
|
|
<div className="w-48 flex-auto pt-4 text-right">
|
|
<div className="flex justify-between pb-1">
|
|
<span className="mr-3 w-full text-right font-sans text-xs font-light">
|
|
Lang option
|
|
</span>
|
|
<span className="pt-1">
|
|
<GlobeAltIcon className="h-3 w-3" />
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<Link
|
|
href="https://bit.ly/buttonbuyticketwebsite"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<Tippy
|
|
content="Get your ticket here!"
|
|
className="font-sans text-xs font-thin"
|
|
interactive={true}
|
|
interactiveBorder={20}
|
|
delay={100}
|
|
>
|
|
<button className="rounded-md bg-yellow-600 px-4 py-2 font-sans text-base font-light text-white duration-150 ease-in hover:bg-yellow-900">
|
|
Buy Ticket
|
|
</button>
|
|
</Tippy>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|