72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link } from 'react-router'
|
|
|
|
import { PopupModal } from '~/components/popup/modal'
|
|
import { Button } from '~/components/ui/button'
|
|
import { FormLogin } from '~/components/ui/form-login'
|
|
import { FormRegister } from '~/components/ui/form-register'
|
|
import { APP } from '~/data/meta'
|
|
|
|
export const HeaderTop = () => {
|
|
const [isLoginOpen, setIsLoginOpen] = useState(false)
|
|
const [isRegisterOpen, setIsRegisterOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
|
|
<Link
|
|
to="/news"
|
|
className="mt-2 h-full py-2"
|
|
>
|
|
<img
|
|
src={APP.logo}
|
|
alt={APP.title}
|
|
className="h-3/4 w-auto sm:h-full"
|
|
/>
|
|
</Link>
|
|
<div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
|
|
{APP.description}
|
|
</div>
|
|
<div className="flex items-center gap-[15px]">
|
|
<Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
|
|
About Us
|
|
</Button>
|
|
<Button
|
|
variant="newsSecondary"
|
|
className="hidden sm:block"
|
|
onClick={() => setIsLoginOpen(true)}
|
|
>
|
|
Akun
|
|
</Button>
|
|
<div className="w-[50px] sm:w-[60px]">
|
|
<img
|
|
alt="language"
|
|
src="/flags/id.svg"
|
|
className="shadow-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<PopupModal
|
|
isOpen={isLoginOpen}
|
|
onClose={() => setIsLoginOpen(false)}
|
|
description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
|
|
>
|
|
<FormLogin
|
|
setIsRegisterOpen={setIsRegisterOpen}
|
|
setIsLoginOpen={setIsLoginOpen}
|
|
/>
|
|
</PopupModal>
|
|
|
|
<PopupModal
|
|
isOpen={isRegisterOpen}
|
|
onClose={() => setIsRegisterOpen(false)}
|
|
description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
|
|
>
|
|
<FormRegister />
|
|
</PopupModal>
|
|
</>
|
|
)
|
|
}
|