feat: adj component

app/components/icons/close.tsx

@@ -0,0 +1,23 @@
+import type { JSX, SVGProps } from 'react'
+
+export const CloseIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={40}
+      height={40}
+      viewBox="0 0 40 40"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 23.537l8.838 8.838a2.5 2.5 0 003.537-3.537L23.533 20l8.84-8.838a2.498 2.498 0 000-3.536 2.5 2.5 0 00-3.536 0L20 16.466l-8.838-8.838a2.5 2.5 0 10-3.537 3.533L16.467 20l-8.84 8.84a2.5 2.5 0 103.536 3.533L20 23.537z"
+        fill="#currentColor"
+      />
+    </svg>
+  )
+}

app/components/icons/eye.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const EyeIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={28}
+      height={20}
+      viewBox="0 0 28 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M14 .676C3.823.676.764 9.49.736 9.58L.595 10l.14.422c.03.09 3.088 8.903 13.265 8.903s13.236-8.814 13.264-8.903l.141-.421-.14-.42C27.236 9.49 24.177.675 14 .675zm0 14.652A5.336 5.336 0 018.667 10 5.336 5.336 0 0114 4.672 5.336 5.336 0 0119.333 10 5.336 5.336 0 0114 15.328z"
+        fill="#currentColor"
+      />
+    </svg>
+  )
+}

app/components/icons/menu.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const MenuIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={38}
+      height={26}
+      viewBox="0 0 38 26"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M2.333 25.5c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.894-.6-1.483-.001-.59.199-1.084.6-1.484.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.895.598 1.484-.001.589-.201 1.084-.6 1.485-.399.401-.893.6-1.483.598H2.333zm0-10.417c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.894-.6-1.483-.001-.589.199-1.083.6-1.483.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.894.598 1.483-.001.589-.201 1.084-.6 1.485-.399.402-.893.601-1.483.598H2.333zm0-10.416c-.59 0-1.084-.2-1.483-.6-.399-.4-.599-.895-.6-1.484C.249 1.994.449 1.5.85 1.1c.401-.4.896-.6 1.483-.6h33.334c.59 0 1.085.2 1.485.6.4.4.6.894.598 1.483-.001.59-.201 1.084-.6 1.486-.399.401-.893.6-1.483.598H2.333z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/popup/header-modal.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react'
+import { Link } from 'react-router'
+
+import { LeftArrow } from '~/components/icons/left-arrow'
+import { APP } from '~/data/meta'
+
+type THeaderModal = {
+  typeForm?: string
+  titleForm?: string
+  children: ReactNode
+}
+export default function HeaderModal({ typeForm, children }: THeaderModal) {
+  return (
+    <>
+      <div className="absolute top-0 left-0 lg:hidden">
+        <Link
+          to="/#"
+          className="mt-2 h-full py-2"
+        >
+          <LeftArrow
+            width={'50px'}
+            height={'50px'}
+          />
+        </Link>
+      </div>
+      <div className="w-full max-w-md">
+        <div className="mb-6 flex justify-center">
+          <Link to="/news">
+            <img
+              src={APP.logo}
+              alt={APP.title}
+              className="h-[80px]"
+            />
+          </Link>
+        </div>
+
+        <div className="mb-4 p-4 text-center text-[#565658]">
+          {children}
+          <p>{typeForm}</p>
+        </div>
+      </div>
+    </>
+  )
+}

app/components/popup/modal.tsx

@@ -1,6 +1,7 @@
+import { Dialog, DialogPanel } from '@headlessui/react'
 import type { ReactNode } from 'react'
 
-interface ModalProperties {
+type ModalProperties = {
   isOpen: boolean
   onClose: () => void
   children: ReactNode
@@ -13,18 +14,22 @@ export default function PopupModal({
 }: ModalProperties) {
   if (!isOpen) return
   return (
-    <>
-      <div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
-        <button
-          onClick={onClose}
-          className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
-        >
-          ✖
-        </button>
-        <div className="relative rounded-lg bg-white p-6 shadow-lg">
-          {children}
+    <Dialog
+      open={isOpen}
+      as="div"
+      className="relative z-30 focus:outline-none"
+      onClose={onClose}
+    >
+      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
+        <div className="flex min-h-full items-center justify-center sm:p-4">
+          <DialogPanel
+            transition
+            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
+          >
+            {children}
+          </DialogPanel>
         </div>
       </div>
-    </>
+    </Dialog>
   )
 }

app/components/popup/succes-payment.tsx

@@ -1,48 +1,29 @@
-import { Link } from 'react-router'
+import { Button } from '@headlessui/react'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
+import HeaderModal from '~/components/popup/header-modal'
 import { APP } from '~/data/meta'
 
 export default function PopupSuccessPayment() {
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <div className="absolute top-[80px] left-[50px]">
-          <Link
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
+    <>
+      <div className="relative flex flex-col items-center justify-center">
+        <HeaderModal>
+          <p>Selamat! Pembayaran anda berhasil!</p>
+        </HeaderModal>
 
         <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">Selamat! Pembayaran anda berhasil!</p>
-          <div className="my-10 flex justify-center">
+          <div className="flex justify-center">
             <img
               src={'/public/images/back-to-home.svg'}
               alt={APP.title}
-              className="h-[350px]"
+              className="h-[300px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
-    </div>
+    </>
   )
 }

app/components/popup/succes-register.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@headlessui/react'
 import { Link } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
@@ -38,9 +39,9 @@ export default function PopupSuccesRegister() {
               className="h-[350px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>

app/components/popup/succes-reset-pass.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@headlessui/react'
 import { Link } from 'react-router'
 
 import { LeftArrow } from '~/components/icons/left-arrow'
@@ -40,9 +41,9 @@ export default function PopupSuccessResetPass() {
               className="h-[350px]"
             />
           </div>
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Back to Home
-          </button>
+          </Button>
         </div>
       </div>
     </div>

app/components/ui/banner.tsx

@@ -11,7 +11,7 @@ export default function Banner() {
           className="mt-2 h-full py-2"
         >
           <img
-            src={'https://placehold.co/1200x70.png'}
+            src={'/public/images/banner.png'}
             alt={APP.title}
             className="h-[70px] w-[100%] sm:h-full"
           />

app/components/ui/form-forgot-password.tsx

@@ -1,40 +1,14 @@
-import { Link } from 'react-router'
-
-import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
+import HeaderModal from '~/components/popup/header-modal'
+import { Button } from '~/components/ui/button'
 
 export default function FormForgotPassword() {
   return (
-    <div className="flex items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <div className="absolute top-[80px] left-[50px]">
-          <Link
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[100px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!
-          </p>
-        </div>
+    <div className="flex flex-col items-center justify-center">
+      <HeaderModal>
+        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
+      </HeaderModal>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -53,9 +27,9 @@ export default function FormForgotPassword() {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-            Daftar
-          </button>
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Reset Password
+          </Button>
         </form>
       </div>
     </div>

app/components/ui/form-login.tsx

@@ -1,44 +1,21 @@
 // import { EyeIcon, EyeOffIcon } from 'lucide-react'
+import { Button } from '@headlessui/react'
 import { useState } from 'react'
 import { Link } from 'react-router'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
+import { EyeIcon } from '~/components/icons/eye'
+import HeaderModal from '~/components/popup/header-modal'
 
 const FormLogin = () => {
   const [showPassword, setShowPassword] = useState(false)
 
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <div className="absolute top-[80px] left-[50px]">
-          <Link
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!
-          </p>
-        </div>
+    <div className="relative flex flex-col items-center justify-center">
+      <HeaderModal>
+        <p>Selamat Datang, silakan masukkan akun Anda untuk melanjutkan!</p>
+      </HeaderModal>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -73,7 +50,17 @@ const FormLogin = () => {
               className="absolute top-9 right-3 text-gray-500"
               onClick={() => setShowPassword(!showPassword)}
             >
-              {/* {showPassword ? <EyeOffIcon size={18} /> : <EyeIcon size={18} />} */}
+              {showPassword ? (
+                <EyeIcon
+                  width={15}
+                  height={15}
+                />
+              ) : (
+                <EyeIcon
+                  width={15}
+                  height={15}
+                />
+              )}
             </button>
           </div>
 
@@ -89,9 +76,9 @@ const FormLogin = () => {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Masuk
-          </button>
+          </Button>
         </form>
 
         {/* Link Daftar */}

app/components/ui/form-register .tsx

@@ -1,43 +1,17 @@
-// import { EyeIcon, EyeOffIcon } from 'lucide-react'
 import { useState } from 'react'
-import { Link } from 'react-router'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
+import HeaderModal from '~/components/popup/header-modal'
+import { Button } from '~/components/ui/button'
 
 export default function FormRegister() {
   const [showPassword, setShowPassword] = useState(false)
   return (
-    <div className="flex items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <div className="absolute top-[80px] left-[50px]">
-          <Link
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[800px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!
-          </p>
-        </div>
+    <div className="flex flex-col items-center justify-center">
+      <HeaderModal>
+        <p>Selamat Datang, silakan masukkan data Anda untuk melanjutkan!</p>
+      </HeaderModal>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Input Email / No Telepon */}
           <div className="mb-4">
@@ -131,9 +105,9 @@ export default function FormRegister() {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
             Daftar
-          </button>
+          </Button>
         </form>
       </div>
     </div>

app/components/ui/form-subscription.tsx

@@ -1,41 +1,17 @@
-import React from 'react'
-import { Link } from 'react-router'
+import { Button } from '@headlessui/react'
 
-import { LeftArrow } from '~/components/icons/left-arrow'
-import { APP } from '~/data/meta'
+import HeaderModal from '~/components/popup/header-modal'
 
 export default function FormSubscription() {
   return (
-    <div className="flex items-center justify-center">
-      <div className="w-full max-w-md p-6">
-        <div className="absolute top-[80px] left-[50px]">
-          <Link
-            to="/#"
-            className="mt-2 h-full py-2"
-          >
-            <LeftArrow
-              width={'70px'}
-              height={'70px'}
-            ></LeftArrow>
-          </Link>
-        </div>
-
-        <div className="mb-6 flex justify-center">
-          <Link to="/news">
-            <img
-              src={APP.logo}
-              alt={APP.title}
-              className="h-[80px]"
-            />
-          </Link>
-        </div>
-
-        <div className="mb-4 p-4 text-center">
-          <p className="text-[#565658]">
-            Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!
-          </p>
-        </div>
+    <div className="flex flex-col items-center justify-center">
+      <HeaderModal>
+        <p>
+          Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!
+        </p>
+      </HeaderModal>
 
+      <div className="w-full max-w-md">
         <form>
           {/* Subscribe*/}
           <div className="mb-4">
@@ -51,9 +27,9 @@ export default function FormSubscription() {
           </div>
 
           {/* Tombol Masuk */}
-          <button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
-            Daftar
-          </button>
+          <Button className="mt-5 w-full rounded-md bg-[#2E2F7C] py-2 text-white transition hover:bg-blue-800">
+            Lanjutkan
+          </Button>
         </form>
       </div>
     </div>

app/layouts/header-menu-mobile.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { Link } from 'react-router'
 
+import { CloseIcon } from '~/components/icons/close'
+import { MenuIcon } from '~/components/icons/menu'
 import { HeaderSearch } from '~/layouts/header-search'
 
 import { MENU } from './menu'
@@ -13,31 +15,27 @@ export default function HeaderMenuMobile() {
   }
   return (
     <>
-      <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="relative z-20 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-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 ${
+            className={`z-20 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'
             }`}
           >
             {/* Tombol Close */}
             <button
               onClick={handleToggleMenu}
-              className="fixed top-2 right-4 z-[100] flex h-9 w-9 items-center justify-center lg:hidden"
+              className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-3.5 w-3.5 fill-white"
-                viewBox="0 0 320.591 320.591"
-              >
-                <path d="M30.391 318.583a30.37 30.37 0 0 1-21.56-7.288c-11.774-11.844-11.774-30.973 0-42.817L266.643 10.665c12.246-11.459 31.462-10.822 42.921 1.424 10.362 11.074 10.966 28.095 1.414 39.875L51.647 311.295a30.366 30.366 0 0 1-21.256 7.288z" />
-                <path d="M287.9 318.583a30.37 30.37 0 0 1-21.257-8.806L8.83 51.963C-2.078 39.225-.595 20.055 12.143 9.146c11.369-9.736 28.136-9.736 39.504 0l259.331 257.813c12.243 11.462 12.876 30.679 1.414 42.922-.456.487-.927.958-1.414 1.414a30.368 30.368 0 0 1-23.078 7.288z" />
-              </svg>
+              <CloseIcon
+                width={50}
+                height={50}
+              />
             </button>
 
             {/* List Menu */}
-            <ul className="mx-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
+            <ul className="mx-10 mt-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
               {MENU.map((item, index) => (
                 <li
                   key={index}
@@ -67,18 +65,10 @@ export default function HeaderMenuMobile() {
               onClick={handleToggleMenu}
               className="h-[63px] border border-white px-4 lg:hidden"
             >
-              <svg
-                className="h-7 w-7"
-                fill="#fff"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                  clipRule="evenodd"
-                />
-              </svg>
+              <MenuIcon
+                width={25}
+                height={25}
+              />
             </button>
             <div className="w-full py-3">
               <HeaderSearch />

app/pages/news-detail/index.tsx

@@ -41,12 +41,15 @@ export const NewsDetailPage = () => {
               className="object-center"
             />
           </div>
-          <article className="pross prose-stone">{content}</article>
 
+          <article
+            className="prose prose-stone"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
           <div className="flex items-end justify-between border-b-3 border-b-gray-300 py-4">
             <div className="flex flex-col">
               <p className="mb-2">Share this post</p>
-              <IconsSocial />
+              <IconsSocial className="a" />
             </div>
             <div className="flex flex-wrap items-end">
               {tags?.map((tag) => (

app/root.tsx

@@ -43,10 +43,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
-        <link
-          rel="stylesheet"
-          href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css"
-        />
         <meta charSet="utf-8" />
         <meta
           name="viewport"