feat: implement news layout components and context for improved structure and functionality

2025-02-22 17:34:25 +08:00
parent d9c36c5ff0
commit 77c9843267
11 changed files with 110 additions and 49 deletions
@@ -0,0 +1,47 @@
+import { Link } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+import { useNewsContext } from '~/contexts/news'
+import { APP } from '~/data/meta'
+
+export const HeaderTop = () => {
+  const { setIsLoginOpen } = useNewsContext()
+  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>
+    </>
+  )
+}