fredy.siswanto f17627bdf2 style: slicing home page, adjust for mobile view
slicing home page, adjust for mobile view
2025-02-20 01:37:35 +07:00

43 lines
1.2 KiB
TypeScript

import { Link } from 'react-router'
import { Button } from '~/components/ui/button'
import { APP } from '~/data/meta'
export const HeaderTop = () => {
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"
>
Akun
</Button>
<div className="w-[50px] sm:w-[60px]">
<img
alt="language"
src="/flags/id.svg"
className="shadow-sm"
/>
</div>
</div>
</div>
)
}