add new reusable modal with transition

ALTA-LapakUMKM-Group-2 · Mar 30, 2023 · d994b89 · d994b89
1 parent bea41dc
commit d994b89
Show file tree

Hide file tree

Showing 16 changed files with 1,492 additions and 165 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,14 +9,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.13",
+    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@react-oauth/google": "^0.9.0",
     "@reduxjs/toolkit": "^1.9.3",
     "@smastrom/react-rating": "^1.2.2",
     "axios": "^1.3.4",
+    "clsx": "^1.2.1",
     "currency-formatter": "^1.5.9",
     "daisyui": "^2.51.4",
     "google-auth-library": "^8.7.0",
     "googleapis": "^114.0.0",
+    "gsap": "^3.11.5",
     "lottie-react": "^2.4.0",
     "prettier-plugin-tailwind": "^2.2.12",
     "react": "^18.2.0",
@@ -29,7 +34,8 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "sweetalert2": "^11.7.3",
-    "sweetalert2-react-content": "^5.0.7"
+    "sweetalert2-react-content": "^5.0.7",
+    "tailwindcss-radix": "^2.8.0"
   },
   "devDependencies": {
     "@types/node": "^18.15.10",

diff --git a/src/App.tsx b/src/App.tsx
@@ -17,6 +17,7 @@ import NotifikasiCoba from "./pages/NotifikasiCoba";
 import { getDark } from "./utils/redux/reducer/reducer";
 import { useState, useEffect, useMemo } from "react";
 import { GoogleOAuthProvider } from '@react-oauth/google';
+import LupaPassword from "./pages/LupaPassword";
 
 
 function App() {
@@ -49,6 +50,7 @@ function App() {
           <Route path="/historypembeli" element={<HistoryPembeli />} />
           <Route path="/toko/:name" element={<Toko />} />
           <Route path="/notif" element={<NotifikasiCoba />} />
+          <Route path="/new-password" element={<LupaPassword />} />
         </Routes >
       </BrowserRouter >
     </GoogleOAuthProvider>

diff --git a/src/components/CutomInput.tsx b/src/components/CutomInput.tsx
@@ -14,7 +14,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 const CustomInput = ({ id, label, name, type, placeholder, value, onChange, classes, ...props }: InputProps) => {
   return (
     <div>
-      <label className="text-zinc-800 text-[16px] md:text-[16px] lg:text-[16px] 2xl:text-[18px] font-semibold" htmlFor={name}>
+      <label className="text-xs font-medium text-gray-700 dark:text-gray-400 text-[16px] md:text-[16px] lg:text-[16px] 2xl:text-[18px] dark:text-white" htmlFor={name}>
         {label}
       </label>
 
@@ -25,7 +25,9 @@ const CustomInput = ({ id, label, name, type, placeholder, value, onChange, clas
         name={name}
         value={value}
         onChange={onChange}
-        className="border-2 mt-2 overflow-x-scroll border-lapak input input-success w-full max-w-full rounded-lg bg-zinc-100 px-4 font-normal text-zinc-800 placeholder-slate-400 disabled:bg-slate-400 text-[16px]"
+        className="border-2 mt-2 overflow-x-scroll input w-full max-w-full border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-slate-800 rounded-lg
+        focus:outline-none focus-visible:ring focus-visible:ring-lapak focus-visible:ring-opacity-75  
+        bg-zinc-100 px-4 font-normal text-zinc-800 dark:text-slate-400 placeholder-slate-400 disabled:bg-slate-400 text-[16px]"
         {...props}
       />
     </div>

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -1,35 +1,74 @@
-import React, { useState } from "react";
-
+import { Transition } from "@headlessui/react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { HiOutlineXMark } from 'react-icons/hi2'
-import { Rating } from "@smastrom/react-rating";
+import { clsx } from "clsx";
+import React, { Fragment } from "react";
 
-type ModalProps = {
+interface DialogProps {
     isOpen: boolean;
-    isClose: React.MouseEventHandler;
+    isClose?: React.MouseEventHandler;
     title?: string;
     children?: React.ReactNode;
     size?: string
-    titleStyle?: string
-};
+}
+
+const Modal: React.FC<DialogProps> = ({isOpen, isClose, title, children, size}) => {
 
-const Modal: React.FC<ModalProps> = ({ isOpen, isClose, title, children, size, titleStyle }) => {
     return (
-        <div
-            className={`${isOpen ? "fixed" : "hidden"
-                } inset-0 w-full py-4 px-4 md:px-4 lg:px-0 2xl:px-0 h-full bg-black bg-opacity-50 flex items-center justify-center z-50 overflow-auto`}
-        >
-            <div className={`${size} bg-gray-100 rounded-lg p-6 overflow-auto`}>
-                <a onClick={isClose} className="text-black text-4xl hover:text-accent cursor-pointer">
-                    <HiOutlineXMark />
-                </a>
-                <div className="flex justify-center items-center mb-4">
-                    <h1 className={`text-2xl font-semibold ${titleStyle}`}>
-                        {title}
-                    </h1>
-                </div>
-                <div>{children}</div>
-            </div>
-        </div>
+    <DialogPrimitive.Root open={isOpen}>
+        <DialogPrimitive.Portal forceMount>
+            <Transition.Root show={isOpen}>
+            <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+            >
+                <DialogPrimitive.Overlay
+                forceMount
+                className="fixed inset-0 z-20 backdrop-blur"
+                />
+            </Transition.Child>
+            <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+            >
+                <DialogPrimitive.Content
+                forceMount
+                className={clsx(
+                    "fixed z-50",
+                    `${size} rounded-lg p-4`,
+                    "top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]",
+                    "bg-white dark:bg-slate-700",
+                    "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
+                )}
+                >
+                <DialogPrimitive.Title className="text-xl font-semibold ml-10 text-gray-900 dark:text-gray-100">
+                    {title}
+                </DialogPrimitive.Title>
+                    {children}
+                <DialogPrimitive.Close
+                    className={clsx(
+                    "absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1",
+                    "focus:outline-none focus-visible:ring focus-visible:ring-purple-500 focus-visible:ring-opacity-75"
+                    )}
+                    onClick={isClose}
+                >
+                    <HiOutlineXMark className="h-8 w-8 text-gray-500 hover:text-lapak dark:hover:text-lapak dark:text-gray-500" />
+                </DialogPrimitive.Close>
+                </DialogPrimitive.Content>
+            </Transition.Child>
+            </Transition.Root>
+        </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
     );
 };
 

diff --git a/src/components/ProdukCard.tsx b/src/components/ProdukCard.tsx
@@ -65,7 +65,7 @@ const ProdukCard: React.FC<ListingProps> = ({
     return (
 
 
-        <div className="w-60 h-full max-w-sm bg-white border border-lapak rounded-lg shadow-lg dark:bg-slate-600 dark:border-4">
+        <div className="w-60 h-full max-w-sm bg-white border border-gray rounded-lg shadow-lg dark:bg-slate-600 dark:border-4 dark:border-lapak">
             <a onClick={onClick} href="#">
                 <img className="p-4 rounded-t-lg cover w-screen h-72" src={ image} alt="product image" />
             </a>
@@ -83,7 +83,7 @@ const ProdukCard: React.FC<ListingProps> = ({
                         readOnly
                         className='dark:text-lapak'
                     />
-                    <span className="bg-teal-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ml-3 dark:text-black dark:bg-white">{rating}</span>
+                    <span className="bg-teal-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded ml-3 dark:text-black ">{rating}</span>
                 </div>
                 <p>Terjual {sell}</p>
                 <div className="flex items-center justify-between">

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -10,10 +10,9 @@ const Search:FC <Props> = ({onSearch}) => {
         <form>
             <div className="relative">
                 <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-                    <AiOutlineSearch className='w-5 h-5 text-gray-900' />
+                    <AiOutlineSearch className='w-5 h-5 text-gray-900 dark:text-white' />
                 </div>
-                <input onChange={onSearch} type="search" className="block input-accent w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50" placeholder="Search Produk" required />
-                <button type="submit" className="text-white absolute right-2.5 bottom-2.5 bg-lapak hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2">Search</button>
+                <input onChange={onSearch} type="search" className="block input-accent w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 dark:bg-slate-700 dark:border-none dark:placeholder-white dark:text-white" placeholder="Search Produk" required />
             </div>
         </form>
     )

diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx
@@ -19,11 +19,13 @@ const TextArea: React.FC<TextAreaProps> = ({
 }) => {
     return (
         <div className="mb-1">
-            <label className="text-zinc-800 text-[18px] font-semibold" htmlFor={name}>
+            <label className="text-xs font-medium text-gray-700 dark:text-gray-400 text-[16px] md:text-[16px] lg:text-[16px] 2xl:text-[18px] dark:text-white" htmlFor={name}>
                 {label}
             </label>
             <textarea
-                className="textarea textarea-lapak border-lapak w-full"
+                className="textarea border-2 mt-2 w-full max-w-full border border-gray-400 focus-visible:border-transparent dark:border-gray-700 dark:bg-slate-800 rounded-lg
+                focus:outline-none focus-visible:ring focus-visible:ring-lapak focus-visible:ring-opacity-75  
+                bg-zinc-100 px-4 font-normal text-zinc-800 dark:text-slate-400 placeholder-slate-400 disabled:bg-slate-400 text-[16px]"
                 id={name}
                 name={name}
                 value={value}

diff --git a/src/pages/Cart.tsx b/src/pages/Cart.tsx
@@ -48,7 +48,6 @@ const Cart: React.FC<CartData> = ({ products }) => {
     const [totalPrice, setTotalPrice] = useState<number>(price)
     const navigate = useNavigate()
 
-    console.log("test tokped",selectedItems);
 
     const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>, product: Product) => {
         const isChecked = e.target.checked;
@@ -59,7 +58,6 @@ const Cart: React.FC<CartData> = ({ products }) => {
             return updatedItems;
         });
     };
-    console.log("total price", price);
 
     const handleCheckAll = (e: React.ChangeEvent<HTMLInputElement>) => {
         const isChecked = e.target.checked;
@@ -108,7 +106,6 @@ const Cart: React.FC<CartData> = ({ products }) => {
         TotalCart()
     }, [TotalCart])
 
-    console.log('cektotal', totalPrice);
 
     const getProfile = async () => {
         setLoading(true)
@@ -195,7 +192,6 @@ const Cart: React.FC<CartData> = ({ products }) => {
     useEffect(() => {
         fetchDataCart()
     }, [])
-    console.log("Cart", cart);
 
     const imgURL = "https://storage.googleapis.com/images_lapak_umkm/product/"
     return (

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -113,13 +113,13 @@ const Home = () => {
             />
             <div className="flex flex-col w-11/12 mx-auto items-center">
                 <div className="mt-10 mx-auto w-3/6">
-                    <p className='dark:text-white text-xl font-semibold'>Cari Berdasarkan Kategori</p>
+                    <p className='dark:text-white font-semibold text-sm md:text-lg lg:text-xl'>Cari Berdasarkan Kategori</p>
                     <div className="flex w-full space-x-10 relative overflow-x-auto p-5">
                         {category?.map((item: any, index: any) => {
                             console.log("item test", item);
 
                             return (
-                                <button key={index} id={item.id} className="btn w-32 bg-white text-slate-800 border-gray-200 shadow hover:bg-lapak hover:border-none dark:border-lapak dark:border-2"
+                                <button key={index} id={item.id} className="btn w-32 bg-white text-slate-800 border-gray-200 shadow hover:bg-lapak hover:border-none dark:border-lapak dark:border-2 dark:bg-slate-700 dark:text-white"
                                     onClick={() => navigate(`/home/${item.category}`, {
                                         state: {
                                             id: item.id

diff --git a/src/pages/HomeFilterPage.tsx b/src/pages/HomeFilterPage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Navbar from '../components/Navbar'
 import Layout from '../components/Layout'
 import FotoProfile from '../assets/photo_2023-03-16_20-34-20.jpg'
@@ -17,7 +17,8 @@ import Loading from '../components/Loading'
 import Search from '../components/Search'
 import Swal from 'sweetalert2'
 import sowwy from '../assets/photo_2023-03-16_20-34-20.jpg'
-
+import { gsap } from 'gsap'
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
     interface FormValues {
     minprice: number | any
     maxprice: number | any
@@ -40,8 +41,23 @@ const HomeFilter = () => {
     const [cookie, setCookie] = useCookies(["token"])
     const [formValues, setFormValues] = useState<FormValues>(initialFormValues);
     const [categoryId, setCategoryId] = useState(location.state.id)
-    console.log("Id",categoryId)
+
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+
+    const handleToggle = () => {
+        setShowFilter(!showFilter);
+    }
 
+    const handleAnimation = () => {
+        const dropdown = dropdownRef.current;
+
+        if (showFilter) {
+            gsap.fromTo(dropdown, { height: 0, display: 'none' }, { duration: 0.5, height: 450, display: 'block' });
+        } else {
+            gsap.to(dropdown, { duration: 0.5, height: 0, display: 'none' });
+        }
+    }
 
     const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         setFormValues({ ...formValues, [e.target.name]: e.target.value })
@@ -147,17 +163,17 @@ const imgUrl = 'https://storage.googleapis.com/images_lapak_umkm/product/'
                 <div className="flex mt-10 mx-auto lg:ml-auto">
                     <div className="w-80 h-fit bg-white border rounded-xl shadow-xl flex flex-col dark:bg-slate-800 dark:border-lapak">
                         <div className="flex flex-col">
-                            <div className="flex flex-row justify-between border-b-2 mx-3 mt-2 pb-2 dark:text-white">
+                            <div className="flex flex-row justify-between border-b-2 mx-3 mt-2 pb-2 dark:text-white dark:border-lapak">
                                 <p className='my-auto text-xl font-semibold'>Filter</p>
                                     <label className="swap swap-rotate">
                                         <input type="checkbox" />
-                                        <IoIosArrowDropup onClick={()=> setShowFilter(true)}  className="swap-on fill-current w-8 h-8"/>
-                                        <IoIosArrowDropdown onClick={()=> setShowFilter(false)} className="swap-off fill-current w-8 h-8"/>
+                                        <IoIosArrowDropup onClick={()=> {setShowFilter(false), handleAnimation()}}  className="swap-on fill-current w-8 h-8"/>
+                                        <IoIosArrowDropdown onClick={()=> {setShowFilter(true), handleAnimation()}} className="swap-off fill-current w-8 h-8"/>
                                     </label>
                             </div>
-                            <div className={`text-lapak font-semibold w-80 transition-all duration-300 ${ showFilter ? 'block' : 'hidden' }`}>
+                            <div ref={dropdownRef} className={`text-lapak font-semibold ${showFilter? 'open' : ''}`}>
                                 <div className="px-4 py-3 text-sm text-gray-900 "> 
-                                    <form onSubmit={handleSubmit} className="space-y-5">
+                                    <form onSubmit={handleSubmit} className={`space-y-5 ${showFilter? 'open' : ''}`} >
                                         <div className='w-full'>
                                             <label className="text-zinc-800 text-[18px] font-semibold dark:text-white" htmlFor='kategori'>
                                                 Kategori