feat: add SearchIcon component and update HeaderSearch to include search functionality

app/components/icons/search.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const SearchIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={30}
+      height={30}
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M11.875 20c-2.27 0-4.192-.787-5.765-2.36-1.573-1.573-2.36-3.495-2.36-5.765 0-2.27.786-4.192 2.36-5.765 1.574-1.573 3.496-2.36 5.765-2.36 2.27 0 4.191.787 5.766 2.36 1.575 1.573 2.362 3.495 2.359 5.765a7.619 7.619 0 01-1.625 4.75l7 7c.23.23.344.52.344.875 0 .354-.115.646-.344.875-.23.23-.52.344-.875.344-.354 0-.646-.115-.875-.344l-7-7A7.618 7.618 0 0111.875 20zm0-2.5c1.563 0 2.89-.547 3.985-1.64 1.094-1.093 1.64-2.422 1.64-3.985 0-1.563-.547-2.891-1.64-3.984-1.092-1.092-2.42-1.64-3.985-1.641-1.564-.002-2.892.545-3.984 1.641C6.8 8.987 6.253 10.315 6.25 11.875c-.003 1.56.545 2.888 1.641 3.985 1.097 1.097 2.425 1.643 3.984 1.64z"
+        fill="#fff"
+      />
+    </svg>
+  )
+}

app/components/ui/button.tsx

@@ -14,6 +14,7 @@ const buttonVariants = cva(
       variant: {
         newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
         newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
+        icon: '',
         // destructive:
         //   'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         // outline:
@@ -26,9 +27,9 @@ const buttonVariants = cva(
       size: {
         default: 'h-[50px] w-[150px]',
         block: 'h-[50px] w-full',
+        icon: 'h-9 w-9',
         // sm: 'h-8 rounded-md px-3 text-xs',
         // lg: 'h-10 rounded-md px-8',
-        // icon: 'h-9 w-9',
       },
     },
     defaultVariants: {

app/pages/news/header-search.tsx

@@ -1,10 +1,21 @@
+import { SearchIcon } from '~/components/icons/search'
+import { Button } from '~/components/ui/button'
+
 export const HeaderSearch = () => {
   return (
-    <form className="flex-1 px-[35px]">
+    <form className="flex flex-1 justify-between gap-[15px] px-[35px]">
       <input
         placeholder="Cari..."
-        className="placeholder:text-white focus:ring-0 focus:outline-none"
+        className="flex-1 placeholder:text-white focus:ring-0 focus:outline-none"
       />
+      <Button
+        type="submit"
+        variant="icon"
+        size="icon"
+        className="[&_svg]:size-[30px]"
+      >
+        <SearchIcon />
+      </Button>
     </form>
   )
 }

app/pages/news/header-top.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router'
 
-import { Button } from '~/components/button'
+import { Button } from '~/components/ui/button'
 import { DUMMY } from '~/data/dummy'
 
 export const HeaderTop = () => {