feat: enhance newsletter component with customizable properties and add search/filter adj dashboard

app/components/ui/banner.tsx

@@ -4,7 +4,7 @@ import { APP } from '~/configs/meta'
 
 export const Banner = () => {
   return (
-    <div className="min-h-[65px] sm:mx-10">
+    <div className="min-h-[65px] lg:mx-10">
       <div className="relative">
         <Link
           to="/#"
@@ -13,12 +13,9 @@ export const Banner = () => {
           <img
             src={'/images/banner.png'}
             alt={APP.title}
-            className="h-[70px] w-[100%] sm:h-full"
+            className="h-[70px] w-[100%] content-center sm:h-full"
           />
         </Link>
-        <p className="absolute top-2 mx-10">
-          Lorem ipsum dolor sit, amet consectetur
-        </p>
       </div>
     </div>
   )

app/components/ui/newsletter.tsx

@@ -1,37 +1,57 @@
+import { twMerge } from 'tailwind-merge'
+
 import { Button } from '~/components/ui/button'
 
-export const Newsletter = () => {
-  return (
-    <div className="flex h-[300px] w-full flex-col md:flex-row">
-      <div className="flex w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:px-30 md:w-[50%]">
-        <h2 className="text-2xl font-bold sm:text-4xl">Join Our Newsletter</h2>
-        <p className="text:md sm:text-lg">
-          Tidak ingin ketinggalan Berita Hukum terhangat? Ingin mendapat
-          informasi kajian dan networking terbaru? Ikuti Newsletter kami dan
-          Stay up to Speed!
-        </p>
-      </div>
+type NewsletterProperties = {
+  className?: string
+  title?: string
+  description?: string
+  textButton?: string
+  onClick?: () => void
+}
+export const Newsletter = (property: NewsletterProperties) => {
+  const { className, title, description } = property
 
+  return (
+    <div className="relative">
       <div
-        className="flex flex-col justify-center bg-cover bg-center px-20 py-5 sm:w-full md:w-[50%]"
-        style={{
-          backgroundImage: "url('https://placehold.co/400x300.png')",
-        }}
+        className={`absolute flex h-[400px] w-screen flex-col sm:h-[300px] md:flex-row ${twMerge('', className)}`}
       >
-        <form className="grid gap-5">
-          <input
-            type="email"
-            placeholder="Daftarkan Email Disini"
-            className="w-full rounded-md border border-gray-300 bg-white p-4 text-sm focus:outline-none"
-          />
-          <Button
-            type="submit"
-            variant="newsPrimary"
-            size="block"
-          >
-            Subscribe
-          </Button>
-        </form>
+        <div className="flex h-1/2 w-full flex-col justify-center gap-5 bg-[#2E2F7C] px-6 py-5 text-white sm:h-full sm:w-[50%] sm:px-30">
+          <h2 className="text-2xl font-bold sm:text-4xl">
+            {title ? `${title}` : 'Join Our Newsletter'}
+          </h2>
+          <p className="text:md sm:text-lg">
+            {description
+              ? `${description}`
+              : `Tidak ingin ketinggalan Berita Hukum terhangat? 
+              Ingin mendapat informasi kajian dan networking terbaru?  
+              Ikuti Newsletter kami dan Stay up to Speed!`}
+          </p>
+        </div>
+        <div
+          style={{
+            backgroundImage: "url('/images/bg-newsletter.png')",
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+          className="flex h-1/2 w-full flex-col items-center justify-center text-center sm:h-full sm:w-[50%]"
+        >
+          <form className="grid w-[50%] gap-5">
+            <input
+              type="email"
+              placeholder="Daftarkan Email Disini"
+              className="w-full rounded-md border border-gray-300 bg-white p-4 text-sm focus:outline-none"
+            />
+            <Button
+              type="submit"
+              variant="newsPrimary"
+              size="block"
+            >
+              Subscribe
+            </Button>
+          </form>
+        </div>
       </div>
     </div>
   )