From 89da497cc973c47f009ae91160e7835473f36eb8 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sat, 1 Feb 2025 01:19:01 +0800
Subject: [PATCH] feat: add header menu and search components with menu data
 for news page

---
 app/data/menu.ts                 | 30 ++++++++++++++++++++++++++++++
 app/pages/news/header-menu.tsx   | 24 ++++++++++++++++++++++++
 app/pages/news/header-search.tsx | 10 ++++++++++
 app/pages/news/index.tsx         |  2 ++
 4 files changed, 66 insertions(+)
 create mode 100644 app/data/menu.ts
 create mode 100644 app/pages/news/header-menu.tsx
 create mode 100644 app/pages/news/header-search.tsx

diff --git a/app/data/menu.ts b/app/data/menu.ts
new file mode 100644
index 0000000..b01e3c5
--- /dev/null
+++ b/app/data/menu.ts
@@ -0,0 +1,30 @@
+export const MENU = [
+  {
+    title: 'Spotlight',
+    url: '/topic?category=spotlight',
+  },
+  {
+    title: 'Berita',
+    url: '/topic?category=berita',
+  },
+  {
+    title: 'Kasus',
+    url: '/topic?category=kasus',
+  },
+  {
+    title: 'Kajian',
+    url: '/topic?category=kajian',
+  },
+  {
+    title: 'Lifestyle',
+    url: '/topic?category=lifestyle',
+  },
+  {
+    title: 'Event',
+    url: '/topic?category=event',
+  },
+  {
+    title: 'Travel',
+    url: '/topic?category=travel',
+  },
+]
diff --git a/app/pages/news/header-menu.tsx b/app/pages/news/header-menu.tsx
new file mode 100644
index 0000000..4e2a817
--- /dev/null
+++ b/app/pages/news/header-menu.tsx
@@ -0,0 +1,24 @@
+import { Link } from 'react-router'
+
+import { MENU } from '~/data/menu'
+
+import { HeaderSearch } from './header-search'
+
+export const HeaderMenu = () => {
+  return (
+    <div className="flex h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white">
+      {MENU.map((item) => (
+        <Link
+          key={item.title}
+          to={item.url}
+          className={
+            'flex h-full items-center justify-center border-r border-white px-[35px]'
+          }
+        >
+          {item.title}
+        </Link>
+      ))}
+      <HeaderSearch />
+    </div>
+  )
+}
diff --git a/app/pages/news/header-search.tsx b/app/pages/news/header-search.tsx
new file mode 100644
index 0000000..e1c1de1
--- /dev/null
+++ b/app/pages/news/header-search.tsx
@@ -0,0 +1,10 @@
+export const HeaderSearch = () => {
+  return (
+    <form className="flex-1 px-[35px]">
+      <input
+        placeholder="Cari..."
+        className="placeholder:text-white focus:ring-0 focus:outline-none"
+      />
+    </form>
+  )
+}
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index d3f7d08..f75dbf1 100644
--- a/app/pages/news/index.tsx
+++ b/app/pages/news/index.tsx
@@ -1,5 +1,6 @@
 import React, { type FC, type PropsWithChildren } from 'react'
 
+import { HeaderMenu } from './header-menu'
 import { HeaderTop } from './header-top'
 
 export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
@@ -7,6 +8,7 @@ export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
     <main className="min-h-dvh bg-[#ECECEC]">
       <header>
         <HeaderTop />
+        <HeaderMenu />
       </header>
       {children}
     </main>