Detail transaction list

3 files changed, 30 insertions, 12 deletions

diff --git a/src/components/BottomPopup.js b/src/components/BottomPopup.js
new file mode 100644
index 00000000..b7f5f2de
--- /dev/null
+++ b/src/components/BottomPopup.js
@@ -0,0 +1,25 @@
+import CloseIcon from "../icons/close.svg";
+
+const BottomPopup = ({ 
+  active = false, 
+  title, 
+  children, 
+  closePopup = () => {}
+}) => {
+  return (
+    <>
+      <div className={"menu-overlay " + (active ? 'block' : 'hidden')} onClick={closePopup} />
+      <div className={`fixed w-full z-[60] py-6 px-4 bg-white rounded-t-3xl idt-transition ${active ? 'bottom-0' : 'bottom-[-100%]'}`}>
+        <div className="flex justify-between items-center mb-5">
+          <h2 className="text-xl font-semibold">{ title }</h2>
+          <button onClick={closePopup}>
+            <CloseIcon className="w-7" />
+          </button>
+        </div>
+        { children }
+      </div>
+    </>
+  );
+};
+
+export default BottomPopup;
\ No newline at end of file
diff --git a/src/components/Filter.js b/src/components/Filter.js
index 92a28e09..f2051ba8 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import CloseIcon from "../icons/close.svg";
+import BottomPopup from "./BottomPopup";
 
 const Filter = ({ 
   isActive,
@@ -104,14 +104,7 @@ const Filter = ({
 
   return (
     <>
-      <div className={"menu-overlay " + (isActive ? 'block' : 'hidden')} onClick={closeFilter} />
-      <div className={`fixed w-full z-[60] py-6 px-4 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
-        <div className="flex justify-between items-center mb-5">
-          <h2 className="text-xl font-semibold">Filter Produk</h2>
-          <button onClick={closeFilter}>
-            <CloseIcon className="w-7" />
-          </button>
-        </div>
+      <BottomPopup active={isActive} closePopup={closeFilter} title="Filter Produk">
         <form className="flex flex-col gap-y-4" onSubmit={submit}>
           {(selectedBrand || selectedCategory || priceFrom || priceTo || orderBy) && (
             <button type="button" className="text-yellow_r-11 font-semibold ml-auto" onClick={reset}>
@@ -175,7 +168,7 @@ const Filter = ({
             Terapkan Filter
           </button>
         </form>
-      </div>
+      </BottomPopup>
     </>
   )
 };
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 24017c03..fd507963 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -8,9 +8,9 @@ export default function Layout({ children, ...pageProps }) {
 
   return children && (
     <motion.main
-      initial={{ opacity: 0, x: 50, y: 0 }}
+      initial={{ opacity: 0, x: 30, y: 0 }}
       animate={{ opacity: 1, x: 0, y: 0 }}
-      exit={{ opacity: 0, x: 100, y: 0 }}
+      exit={{ opacity: 0, x: 30, y: 0 }}
       transition={transition}
       {...pageProps}
     >