From e379fdde430a39af2a8da6aea62ec400eefda335 Mon Sep 17 00:00:00 2001
From: Mohammad <m789219@gmail.com>
Date: Tue, 12 Mar 2024 17:02:53 +0330
Subject: [PATCH] design:improve design and bug fixed ui/ux

---
 components/Footer/index.jsx        |  63 ---------------
 components/Home/LazyBook.jsx       |   8 +-
 components/Home/Main.jsx           |  14 ++--
 components/Home/PageBook.jsx       |   4 +-
 components/Home/SingleRowBook.jsx  |   2 +-
 components/Layout/Navbar.jsx       |   4 +-
 components/Login/index.jsx         |   4 +-
 components/User/SingleReserved.jsx | 119 ++++++++++++++++-------------
 components/User/UserReserved.jsx   |   3 +-
 pages/_app.js                      |   9 ++-
 pages/user/logout.js               |   2 +-
 11 files changed, 92 insertions(+), 140 deletions(-)
 delete mode 100644 components/Footer/index.jsx

diff --git a/components/Footer/index.jsx b/components/Footer/index.jsx
deleted file mode 100644
index c2f0eef..0000000
--- a/components/Footer/index.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import {TbBrandInstagram, TbSmartHome,TbUser,TbLogin} from 'react-icons/tb'
-import DesktopFooter from "./Desktop";
-export default function footer() {
-  const [hasLoggedIn, setHasLoggedIn] = useState(false);
-
-  if (typeof window !== "undefined") {
-    useEffect(() => {
-      if (localStorage.getItem("token")) {
-        setHasLoggedIn(true);
-      } else {
-        setHasLoggedIn(false);
-      }
-    }, [localStorage.getItem("token")]);
-  }
-  return (
-    <>
-      <div className="w-full h-20 lg:hidden md:hidden">
-        <section
-          id="bottom-navigation"
-          className="block h-14 fixed inset-x-0 bottom-0 z-10 bg-white shadow border-t-2  "
-        >
-          <div id="tabs" className="flex justify-between">
-            <Link href="/">
-              <a className="w-full  focus:text-green-600 focus:border-t-2 border-green-500  hover:text-green-600 justify-center inline-block text-center pt-2 pb-1">
-                <TbSmartHome className="mx-auto mb-1 text-green-600" size={25 }/>
-                <span className=" block text-[11px]">خانه</span>
-              </a>
-            </Link>
-
-
-            {hasLoggedIn ? (
-              <Link href="/user/dashboard">
-                <a
-                  href="#"
-                  className="w-full focus:text-green-600 focus:border-t-2 border-green-500 justify-center inline-block text-center pt-2 pb-1"
-                >
-                  <TbUser size={25} className="mx-auto mb-1 text-green-600"/>
-                  <span className=" block text-[11px]">پروفایل</span>
-                </a>
-              </Link>
-            ) : (
-              <Link href="/login">
-                <a
-                  href="#"
-                  className="w-full focus:text-green-600 focus:border-t-2 border-green-500 justify-center inline-block text-center pt-2 pb-1"
-                >
-                <TbLogin size={25} className="mx-auto mb-1 text-green-600"/>
-
-
-                  <span className=" block text-xs">ورود به حساب</span>
-                </a>
-              </Link>
-            )}
-          </div>
-        </section>
-      </div>
- 
- <DesktopFooter/>
-    </>
-  );
-}
diff --git a/components/Home/LazyBook.jsx b/components/Home/LazyBook.jsx
index deddbe1..ce494f6 100644
--- a/components/Home/LazyBook.jsx
+++ b/components/Home/LazyBook.jsx
@@ -1,10 +1,10 @@
 export default function LazyBookComponent() {
   return (
-    <div className="flex space-x-2 justify-center items-center bg-transparent mt-[10%] dark:invert">
+    <div className="flex space-x-2 justify-center items-center bg-transparent mt-[50%] lg:mt-[15%] ">
       <span className="sr-only">Loading...</span>
-      <div className="h-6 w-6 bg-[#16a34a] rounded-full animate-bounce [animation-delay:-0.3s]"></div>
-      <div className="h-6 w-6 bg-[#16a34a] rounded-full animate-bounce [animation-delay:-0.15s]"></div>
-      <div className="h-6 w-6 bg-[#16a34a] rounded-full animate-bounce"></div>
+      <div className="h-4 w-4 bg-[#16a34a] rounded-full animate-bounce [animation-delay:-0.3s]"></div>
+      <div className="h-4 w-4 bg-[#16a34a] rounded-full animate-bounce [animation-delay:-0.15s]"></div>
+      <div className="h-4 w-4 bg-[#16a34a] rounded-full animate-bounce"></div>
     </div>
   );
 }
diff --git a/components/Home/Main.jsx b/components/Home/Main.jsx
index ba24f96..0999cc1 100644
--- a/components/Home/Main.jsx
+++ b/components/Home/Main.jsx
@@ -2,7 +2,6 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { last_search } from "../../services/search";
 import { AiOutlineSearch } from "react-icons/ai";
-import LogoApplication from "./Logo";
 import Select from "../common/Select";
 import { AxiosInstance } from "../../utils/http";
 import SingleRowBook from "./SingleRowBook";
@@ -123,9 +122,8 @@ export default function MainComponent() {
   return (
     <>
       <div className="row">
-        <div className="lg:hidden">
-          <LogoApplication />
-        </div>
+        
+        
 
         <form
           className="md:mb-8 lg:w-2/3 mx-auto flex flex-col md:flex-row md:items-center mb-4 lg:mt-8 mt-1 lg:px-0 sm:px-4 "
@@ -138,7 +136,7 @@ export default function MainComponent() {
             defaultValue={currentLibraryId}
             onChange={(v) => setCurrentLibraryId(Number(v))}
             ClassName={
-              "md:w-1/4  text-gray-900 rounded-lg bg-gray-50 border border-gray-300 focus:ring-green-500 focus:border-green-500  "
+              "md:w-1/4  text-gray-700 rounded-lg bg-gray-50 border border-gray-300 focus:ring-1 focus:outline-none  focus:ring-green-500 focus:border-green-500  "
             }
           />
           <Select
@@ -150,7 +148,7 @@ export default function MainComponent() {
             }}
             label={"انتخاب همه دسته ها"}
             ClassName={
-              "md:w-1/4 lg:mx-4 mx-0 mt-1 text-gray-900 rounded-lg bg-gray-50 border border-gray-300 focus:ring-green-500 focus:border-green-500 "
+              "md:w-1/4 lg:mx-4 mx-0 mt-1 text-gray-700 rounded-lg bg-gray-50 border focus:ring-1 focus:outline-none border-gray-300 focus:ring-green-500 focus:border-green-500 "
             }
           />
 
@@ -159,7 +157,7 @@ export default function MainComponent() {
               autoComplete="off"
               type="search"
               id="default-search"
-              className=" py-5 pr-5 pl-10 w-full md:text-base outline-none  text-sm rounded-lg text-gray-900 bg-gray-50  border border-gray-300 focus:ring-green-500 focus:border-green-500"
+              className=" py-5 pr-5 pl-10 w-full md:text-base outline-none focus:ring-1  text-sm rounded-lg text-gray-900 bg-gray-50  border border-gray-300 focus:ring-green-500 focus:border-green-500"
               placeholder={"جست و جو در بین 40 هزار جلد کتاب"}
               onChange={(e) => setCurrentBookName(e.target.value)}
               value={currentBookName}
@@ -212,7 +210,7 @@ export default function MainComponent() {
                   قبلی
                 </button>
               )}
-              {/* Next Button */}
+
               <button
                 onClick={bookSearchLoading}
                 className="inline-flex justify-center items-center gap-x-2 text-center bg-white border hover:border-gray-300 text-sm text-green-600 hover:text-green-700 font-medium hover:shadow-sm rounded-full focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 "
diff --git a/components/Home/PageBook.jsx b/components/Home/PageBook.jsx
index b751bf9..479547d 100644
--- a/components/Home/PageBook.jsx
+++ b/components/Home/PageBook.jsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import LazyBookComponent from "./LazyBook";
 
 import Pn from "persian-number";
-import Head from "next/head";
+
 import Image from "next/image";
 
 export default function PageBook({ id }) {
@@ -117,7 +117,7 @@ export default function PageBook({ id }) {
 
                 <div className="flex flex-wrap -mx-2 mb-12 mt-10">
                   <div className="w-full md:w-2/3 px-2 mb-2 md:mb-0">
-                    <a className="block    py-4 px-2 leading-8 font-heading font-medium tracking-tighter text-xl text-white text-center bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 hover:bg-green-600 rounded-xl">
+                    <a className="block    py-4 px-2 text-sm  font-heading  tracking-tighter  text-white text-center bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 hover:bg-green-600 rounded-xl">
                       {allbooks.totalEntity > 0 ? (
                         <span className="font-semibold text-gray-100">
                           کتاب موجود است و میتوانید حضوری کتاب را امانت بگیرید
diff --git a/components/Home/SingleRowBook.jsx b/components/Home/SingleRowBook.jsx
index e1ffd40..08c7c14 100644
--- a/components/Home/SingleRowBook.jsx
+++ b/components/Home/SingleRowBook.jsx
@@ -35,7 +35,7 @@ export default function SingleRowBook(props) {
                   placeholder="blur"
                   blurDataURL="YOUR_GENERATED_BLURHASH_STRING"
                   quality={1}
-                  layout="responsive"
+                  layout="fill"
                   objectFit="contain"
                   className="rounded-md"
                 />
diff --git a/components/Layout/Navbar.jsx b/components/Layout/Navbar.jsx
index b8385b6..02b7660 100644
--- a/components/Layout/Navbar.jsx
+++ b/components/Layout/Navbar.jsx
@@ -13,7 +13,7 @@ export default function NavbarComponent({ url }) {
   }, [url]);
   return (
     <>
-      <header className="hidden w-full  lg:px-36   lg:block    flex-wrap sm:justify-start sm:flex-nowrap z-50  bg-transparent border-b shadow-lg  rounded-lg text-sm py-2  dark:bg-slate-900 dark:border-gray-700">
+      <header className=" w-full p-4  lg:px-36   lg:block    flex-wrap sm:justify-start sm:flex-nowrap z-50  bg-transparent border-b shadow-lg  rounded-lg text-sm py-2 ">
         <nav
           className="lg:w-2/3  flex basis-full items-center  mx-auto   "
           aria-label="Global"
@@ -47,7 +47,7 @@ export default function NavbarComponent({ url }) {
                     <a
                       id="hs-dropdown-with-header"
                       type="button"
-                      className="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 dark:text-gray-400 dark:hover:text-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
+                      className="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-white text-gray-700 align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-white transition-all text-xs dark:bg-gray-800 dark:hover:bg-slate-800 "
                     >
                       <img
                         className="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800"
diff --git a/components/Login/index.jsx b/components/Login/index.jsx
index 0838f81..8cfe027 100644
--- a/components/Login/index.jsx
+++ b/components/Login/index.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import ChangePassword from "./ChangePassword";
 import { useRouter } from "next/router";
-import Toast from "../Toast/Toast";
+
 import { AxiosInstance } from "../../utils/http/index";
 import Link from "next/link";
 import { toast } from "react-toastify";
@@ -15,7 +15,7 @@ export default function Login() {
   const [changePassword, setChangePassword] = useState(false);
   const [login, setLogin] = useState(false);
   const [error, setError] = useState(false);
-  const [phonenumber, setPhonenumber] = useState(false);
+
   const router = useRouter();
 
   const handleOnChange = () => {
diff --git a/components/User/SingleReserved.jsx b/components/User/SingleReserved.jsx
index 8bcda03..37f0061 100644
--- a/components/User/SingleReserved.jsx
+++ b/components/User/SingleReserved.jsx
@@ -1,76 +1,91 @@
-import Link from 'next/link';
-import React from 'react'
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
 
-export default function SingleReserved({ bookname, image, index, expire, returned ,createdAt ,bookId}) {
-  function setStatus(){
+export default function SingleReserved({
+  bookname,
+  image,
+  index,
+  expire,
+  returned,
+  createdAt,
+  bookId,
+}) {
+  function setStatus() {
     switch (returned) {
       case "PENDING":
-        return <span className=" text-orange-500 border   border-orange-500 text-sm font-medium  px-3 py-0.5 rounded  ">انتظار تایید</span> 
-        break;
-    
-        case "ACTIVE":
-          return   <span className=" text-green-600 border  border-green-500 text-sm font-medium  px-3 py-0.5 rounded  ">امانت فعال </span> 
-          break;
-
 
-          case "REJECT":
-            return <span className=" text-red-500 border  border-red-500 text-sm font-medium  px-3 py-0.5 rounded ">رد شده</span> 
-            break;
+      case "ACTIVE":
+        return (
+          <span className=" text-yellow-600 border  border-yellow-500 text-sm font-medium  px-3 py-0.5 rounded  ">
+            امانت فعال
+          </span>
+        );
+        break;
 
-            case "CLOSED":
-            return <span className=" text-sky-500 border  border-sky-500 text-sm font-medium  px-3 py-0.5 rounded ">تحویل داده شده</span> 
-            break;
+      case "CLOSED":
+        return (
+          <span className=" text-green-600 border  border-green-500 text-sm font-medium  px-3 py-0.5 rounded ">
+            تحویل داده شده
+          </span>
+        );
+        break;
     }
   }
   return (
-    
     <li key={index} className=" py-10  sm:py-4">
       <div className="flex items-center ">
         <div className="flex-shrink-0">
-        <Link
-                    href={{ pathname: "/book/[id]" }}
-                    as={`/book/${bookId}`}
-                  >
-                    <a>
-          <img className="w-20 h-28 rounded-sm" src={image} alt="Neil image" />
-          </a>
+          <Link href={{ pathname: "/book/[id]" }} as={`/book/${bookId}`}>
+            <a>
+              <Image
+                src={image}
+                alt="Just a flower"
+                unoptimized={true}
+                width={85}
+               
+                height={100}
+                blurDataURL="YOUR_GENERATED_BLURHASH_STRING"
+                quality={20}
+                layout="intrinsic"
+                objectFit="contain"
+                className="rounded-md"
+              />
+            </a>
           </Link>
-
         </div>
         <div className="flex-1 min-w-0 pr-4">
-        <Link
-                    href={{ pathname: "/book/[id]" }}
-                    as={`/book/${bookId}`}
-                  >
-                    <a>
-          <p className="text-sm font-medium text-gray-900 truncate ">
-            {bookname}
-          </p>
-          </a>
+          <Link href={{ pathname: "/book/[id]" }} as={`/book/${bookId}`}>
+            <a>
+              <p className="text-sm font-medium text-gray-900 truncate ">
+                {bookname}
+              </p>
+            </a>
           </Link>
           <p className="text-xs mt-3 font-medium text-gray-700 truncate ">
-           کد کتاب : {bookId}
+            کد کتاب : {bookId}
           </p>
-          <p dir='ltr' className=" text-xs mt-3 font-medium text-gray-900 truncate ">
-            {expire}: تاریخ امانت کتاب 
-          </p>
-       
-          <p dir='ltr' className=" text-xs mt-3 font-medium text-gray-900 truncate ">
-            {createdAt}: موعد تحویل 
+          <p
+            dir="ltr"
+            className=" text-xs mt-3 font-medium text-gray-900 truncate "
+          >
+            {expire}: تاریخ امانت کتاب
           </p>
 
+          <p
+            dir="ltr"
+            className=" text-xs mt-3 font-medium text-gray-900 truncate "
+          >
+            {createdAt}: موعد تحویل
+          </p>
+        </div>
+        <div className="hidden md:block justify-items-start float-left mb-5  text-base font-semibold text-gray-900 ">
+          {setStatus()}
         </div>
-        <div className="hidden md:block justify-items-start float-left mb-5  text-base font-semibold text-gray-900 "> 
-        {setStatus()}
-       </div>
       </div>
-      <div className="justify-items-start float-left mb-5 md:hidden text-base font-semibold text-gray-900 "> 
+      <div className="justify-items-start float-left mb-5 md:hidden text-base font-semibold text-gray-900 ">
         {setStatus()}
       </div>
-
-      
-       
     </li>
-    
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/components/User/UserReserved.jsx b/components/User/UserReserved.jsx
index 5b99275..1e4e36b 100644
--- a/components/User/UserReserved.jsx
+++ b/components/User/UserReserved.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { AxiosInstance } from "../../utils/http";
 import SingleReserved from "./SingleReserved";
 import moment from "jalali-moment";
+import Pn from "persian-number";
 
 export default function UserReserved() {
   const [order, setOrder] = useState([]);
@@ -53,7 +54,7 @@ export default function UserReserved() {
             className="text-sm font-medium text-blue-600 hover:underline "
           >
             <span className="mt-6 inline-flex items-center justify-center px-2 py-1 mr-2 text-xs  leading-none text-white bg-green-600 rounded-full">
-              {count} امانت فعال
+              {Pn.convertEnToPe(count)} امانت فعال
             </span>
           </a>
         </div>
diff --git a/pages/_app.js b/pages/_app.js
index ea4b5f1..e05f467 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,14 @@
 import "../styles/globals.css";
 import "../styles/style.css";
 import Layout from "../components/Layout";
-import Footer from "../components/Footer";
+
 import NextNProgress from "nextjs-progressbar";
 import { useState } from "react";
 import Login from "../components/Login";
 import NavbarComponent from "../components/Layout/Navbar";
 import { useRouter } from "next/router";
 import ApiMiddleware from "../components/Middleware/Up";
+import DesktopFooter from "../components/Footer/Desktop";
 
 function MyApp({ Component, pageProps }) {
   const [login, setLogin] = useState(true);
@@ -22,11 +23,11 @@ function MyApp({ Component, pageProps }) {
           <NavbarComponent url={nowRouter} />
 
           <NextNProgress
-            options={{ easing: "ease", speed: 500 }}
+            options={{ easing: "ease", speed: 700 }}
             color="#22c55e"
             startPosition={0.3}
             stopDelayMs={50}
-            height={3}
+            height={4}
             showOnShallow={true}
           />
           <main className="grid grid-cols-12 mx-auto container  md:gap-x-4 min-h-screen">
@@ -34,7 +35,7 @@ function MyApp({ Component, pageProps }) {
               <Component {...pageProps} />
             </div>
           </main>
-          <Footer />
+          <DesktopFooter />
         </Layout>
       ) : (
         <Login />
diff --git a/pages/user/logout.js b/pages/user/logout.js
index 4a7e9c9..2574ed4 100644
--- a/pages/user/logout.js
+++ b/pages/user/logout.js
@@ -7,7 +7,7 @@ const Logout = () => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       localStorage.clear();
-      router.push("/login");
+      router.push("/");
     }
   });