legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create component modal, popup and form input

Browse Source
This commit is contained in:
fredy.siswanto
2025-02-21 20:47:15 +07:00
parent 7c4440cc6b
commit 84e49cd335
16 changed files with 521 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layouts/header-menu-mobile.tsx
+8 -5
View File
@@ -13,11 +13,11 @@ export default function HeaderMenuMobile() {
}
return (
<>
<div className="relative z-50 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
<div className="relative z-40 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
<div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
{/* Menu */}
<div
className={`z-50 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
className={`z-40 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
isMenuOpen ? 'translate-x-0' : '-translate-x-full'
}`}
>
@@ -38,8 +38,11 @@ export default function HeaderMenuMobile() {
{/* List Menu */}
<ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
{MENU.map((item) => (
<li className="px-3 max-lg:border-b max-lg:py-3">
{MENU.map((item, index) => (
<li
key={index}
className="px-3 max-lg:border-b max-lg:py-3"
>
<Link
key={item.title}
to={item.url}
@@ -78,7 +81,7 @@ export default function HeaderMenuMobile() {
</svg>
</button>
<div className="w-full py-3">
<HeaderSearch></HeaderSearch>
<HeaderSearch />
</div>
</div>
</div>
app/layouts/header-top.tsx
+45 -28
View File
@@ -1,42 +1,59 @@
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 { APP } from '~/data/meta'
export const HeaderTop = () => {
const [isModalOpen, setModalOpen] = 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"
<>
<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"
>
Akun
</Button>
<div className="w-[50px] sm:w-[60px]">
<img
alt="language"
src="/flags/id.svg"
className="shadow-sm"
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={() => setModalOpen(true)}
>
Akun
</Button>
<div
className="w-[50px] sm:w-[60px]"
onClick={() => setModalOpen(true)}
>
<img
alt="language"
src="/flags/id.svg"
className="shadow-sm"
/>
</div>
</div>
</div>
</div>
<PopupModal
isOpen={isModalOpen}
onClose={() => setModalOpen(false)}
>
<FormLogin />
</PopupModal>
</>
)
}