From 4fd738fd54f81fa53c2b3e78b7a80fbfda250352 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 21 Feb 2023 10:19:32 +0700
Subject: fix

---
 src/core/components/elements/Popup/BottomPopup.jsx |  52 ++++++++---
 src/core/components/elements/Sidebar/Sidebar.jsx   | 103 +++++++++++++--------
 src/lib/auth/components/Login.jsx                  |   2 +-
 src/lib/transaction/components/Transactions.jsx    |   1 -
 4 files changed, 101 insertions(+), 57 deletions(-)

diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx
index 5deceadf..933a8f11 100644
--- a/src/core/components/elements/Popup/BottomPopup.jsx
+++ b/src/core/components/elements/Popup/BottomPopup.jsx
@@ -1,20 +1,44 @@
 import { XMarkIcon } from "@heroicons/react/24/outline"
+import { AnimatePresence, motion } from "framer-motion"
 
-const BottomPopup = ({ children, active, title, close }) => (
+const transition = { ease: 'linear', duration: 0.2 }
+
+const BottomPopup = ({ 
+  children, 
+  active = false, 
+  title, 
+  close 
+}) => (
   <>
-    <div 
-      onClick={close} 
-      className={`overlay ${active ? 'block' : 'hidden'}`} 
-    />
-    <div className={`fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white idt-transition ${active ? 'bottom-0' : '-bottom-full'}`}>
-      <div className="flex justify-between py-4">
-        <div className="font-semibold text-h-sm">{ title }</div>
-        <button type="button" onClick={close}>
-          <XMarkIcon className="w-5 stroke-2" />
-        </button>
-      </div>
-      { children }
-    </div>
+    <AnimatePresence>
+      { active && (
+        <>
+          <motion.div
+            className="overlay"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={transition}
+            onClick={close}
+          />
+          <motion.div
+            initial={{ bottom: '-100%' }}
+            animate={{ bottom: 0 }}
+            exit={{ bottom: '-100%' }}
+            transition={transition}
+            className="fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white"
+          >
+            <div className="flex justify-between py-4">
+              <div className="font-semibold text-h-sm">{ title }</div>
+              <button type="button" onClick={close}>
+                <XMarkIcon className="w-5 stroke-2" />
+              </button>
+            </div>
+            { children }
+          </motion.div>
+        </>
+      ) }
+    </AnimatePresence>
   </>
 )
 
diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 412ed915..122a10f3 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -2,6 +2,7 @@ import Link from "../Link/Link"
 import greeting from "@/core/utils/greeting"
 import { Cog6ToothIcon } from "@heroicons/react/24/solid"
 import useAuth from "@/core/hooks/useAuth"
+import { AnimatePresence, motion } from "framer-motion"
 
 const Sidebar = ({
   active,
@@ -17,49 +18,69 @@ const Sidebar = ({
   )
 
   const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
-  
+  const transition = { ease: 'linear', duration: 0.1 }
+
   return (
     <>
-      { active && <div className="overlay z-50" onClick={close}></div> }
-      <div className={`fixed z-[55] top-0 h-full w-[80%] transition-all ease-linear duration-50 bg-white ${active ? 'left-0' : '-left-[80%]'}`}>
-        <div className="divide-y divide-gray_r-6">
-          <div className="p-4 flex gap-x-3">
-            { !auth && (
-              <>
-                <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
-                <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
-              </>
-            ) }
-            { auth && (
-              <>
-                <div className="text-caption-2 text-gray_r-11">
-                  { greeting() },
-                  <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
-                    { auth?.name }
-                  </span>
-                </div>
-                <Link 
-                  onClick={close} 
-                  href="/my/menu" 
-                  className="!text-gray_r-11 ml-auto my-auto"
-                >
-                  <Cog6ToothIcon className="w-6" />
-                </Link>
-              </>
-            ) }
-          </div>
-          <SidebarLink className={itemClassName} href="/">
-            Semua Brand
-          </SidebarLink>
-          <SidebarLink className={itemClassName} href="/">
-            Tentang Indoteknik
-          </SidebarLink>
-          <SidebarLink className={itemClassName} href="/">
-            Pusat Bantuan
-          </SidebarLink>
-          <button className={`${itemClassName} w-full text-left`}>Kategori</button>
-        </div>
-      </div>
+    <AnimatePresence>
+      { active && (
+        <>
+          <motion.div
+            className="overlay z-50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={transition}
+            onClick={close}
+          />
+          <motion.div
+            className="fixed z-[55] top-0 h-full w-[80%] bg-white"
+            initial={{ left: '-80%' }}
+            animate={{ left: 0 }}
+            exit={{ left: '-80%' }}
+            transition={transition}
+          >
+            <div className="divide-y divide-gray_r-6">
+              <div className="p-4 flex gap-x-3">
+                { !auth && (
+                  <>
+                    <Link href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
+                    <Link href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link>
+                  </>
+                ) }
+                { auth && (
+                  <>
+                    <div className="text-caption-2 text-gray_r-11">
+                      { greeting() },
+                      <span className="text-body-2 text-gray_r-12 block mt-1 font-medium">
+                        { auth?.name }
+                      </span>
+                    </div>
+                    <Link 
+                      onClick={close} 
+                      href="/my/menu" 
+                      className="!text-gray_r-11 ml-auto my-auto"
+                    >
+                      <Cog6ToothIcon className="w-6" />
+                    </Link>
+                  </>
+                ) }
+              </div>
+              <SidebarLink className={itemClassName} href="/">
+                Semua Brand
+              </SidebarLink>
+              <SidebarLink className={itemClassName} href="/">
+                Tentang Indoteknik
+              </SidebarLink>
+              <SidebarLink className={itemClassName} href="/">
+                Pusat Bantuan
+              </SidebarLink>
+              <button className={`${itemClassName} w-full text-left`}>Kategori</button>
+            </div>
+          </motion.div>
+        </>
+      ) }
+    </AnimatePresence>
     </>
   )
 }
diff --git a/src/lib/auth/components/Login.jsx b/src/lib/auth/components/Login.jsx
index e598fe48..acb6e8c3 100644
--- a/src/lib/auth/components/Login.jsx
+++ b/src/lib/auth/components/Login.jsx
@@ -64,7 +64,7 @@ const Login = () => {
         <div>
           <label htmlFor="email">Alamat Email</label>
           <input 
-            type="text" 
+            type="email" 
             id="email" 
             className="form-input w-full mt-3" 
             value={email}
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 45a6445c..5eb1d947 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -56,7 +56,6 @@ const Transactions = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault()
-    if (!inputQuery) return
     router.push(`/my/transactions?q=${inputQuery}`)
   } 
 
-- 
cgit v1.2.3