Skip to content

Commit

Permalink
design:bug fixed design and change logo and improve performance for l…
Browse files Browse the repository at this point in the history 
…oad pages
  • Loading branch information
@mohammadhasanii
mohammadhasanii committed Mar 12, 2024
1 parent 0c8a828 commit fe2a364
Show file tree
Hide file tree
Showing 43 changed files with 557 additions and 620 deletions.
27 changes: 9 additions & 18 deletions components/Footer/Desktop.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,16 @@ export default function DesktopFooter() {
return (
<footer className="w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
<div className="text-center">
<div>
<a
className="flex-none text-xl font-semibold text-black dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
aria-label="Brand"
>
بوکیتو
</a>
</div>
{/* End Col */}
<div className="mt-3">
<a href="https://markazi-tvu.ac.ir/">
<p className="text-gray-500">
تمامی حقوق برای دانشگاه فنی حرفه ای استان مرکزی محفوظ است
</p>


<div className="my-8">



<p className="text-gray-500">
طراحی و توسعه توسط <a href="https://mohammadhasanii.ir">محمد حسنی</a>
طراحی و توسعه توسط تیم <a href="https://bettercode.ir"> BetterCode </a>
</p>
</a>

</div>
{/* Social Brands */}
<div className="mt-3 space-x-2">
Expand All @@ -42,7 +33,7 @@ export default function DesktopFooter() {
</a>
<a
className="inline-flex justify-center items-center w-10 h-10 text-center text-gray-500 hover:bg-gray-100 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition dark:text-gray-500 dark:hover:text-gray-200 dark:hover:bg-gray-800"
href="https://github.com/mohammadhasanii"
href="https://github.com/bettercode-co"
>
<svg
className="flex-shrink-0 w-3.5 h-3.5"
Expand Down
14 changes: 5 additions & 9 deletions components/Home/LazyBook.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
export default function LazyBookComponent() {
return (

<div className="min-h-[15rem] flex flex-col bg-transparent ">
<div className="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
<div className="flex justify-center">
<div className="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500" role="status" aria-label="loading">
<span className="sr-only">Loading...</span>
</div>
<div className="flex space-x-2 justify-center items-center bg-transparent mt-[10%] dark:invert">
<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>
</div>
</div>
);
}
11 changes: 7 additions & 4 deletions components/Home/Logo.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import Image from "next/image";
import React from "react";
export default function LogoApplication() {
return (
<img
className="w-10 mx-auto my-3 "
src="/book.png"
alt="image description"
<Image
src="/images/logo.svg"
alt="The logo could not be loaded"
width={50}
height={50}
className="mx-auto my-3"
/>
);
}
189 changes: 107 additions & 82 deletions components/Home/PageBook.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import React, { useEffect, useState } from "react";
import { AxiosInstance } from "../../utils/http";
import { useRouter } from "next/router";
import LazyBookComponent from './LazyBook'
import LazyBookComponent from "./LazyBook";

import Pn from "persian-number";
import Head from "next/head";

import Image from "next/image";

export default function PageBook({ id }) {
const [allbooks, setBook] = useState({});
const router = useRouter();
const [loading,setLoading] =useState(true)
const [loading, setLoading] = useState(true);
useEffect(() => {
AxiosInstance.get(`/home/books/${id}`)
.then(function (response) {
setBook(response.data.result);
setLoading(false)
setLoading(false);
})
.catch(function (err) {
console.log(err);
Expand All @@ -24,93 +24,118 @@ export default function PageBook({ id }) {

return (
<>



{loading ? <LazyBookComponent/> : <section className="pt-12 pb-24 bg-greenGray-100 rounded-b-10xl overflow-hidden">
<div className="container px-4 mx-auto">
<div className="flex flex-wrap -mx-4">
<div className="w-full px-4"></div>
<div className="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
<div className="flex -mx-4 flex-wrap items-center justify-between lg:justify-start lg:items-start xl:items-center">
<div className="w-full sm:w-9/12 px-4">
<img
className="mb-5 rounded-lg "
src={allbooks.imageSource}
alt=""
/>
{loading ? (
<LazyBookComponent />
) : (
<section className="pt-12 pb-24 bg-greenGray-100 rounded-b-10xl overflow-hidden">
<div className="container px-4 mx-auto">
<div className="flex flex-wrap -mx-4">
<div className="w-full px-4"></div>
<div className="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
<div className="flex -mx-4 flex-wrap items-center justify-between lg:justify-start lg:items-start xl:items-center">
<div className="w-full sm:w-9/12 px-4 ">
<Image
src={allbooks.imageSource}
alt="Just a flower"
width={1000}
height={950}
priority
placeholder="blur"
blurDataURL="YOUR_GENERATED_BLURHASH_STRING"
quality={1}
layout="responsive"
objectFit="contain"
className="rounded-md"
/>
{/* <img
className="mb-5 rounded-lg "
src={allbooks.imageSource}
alt=""
/> */}
</div>
</div>
</div>
</div>
<div className="w-full lg:w-1/2 px-4">
<div className="max-w-md mb-6">
<span className="text-xs text-gray-500 font-bold tracking-wider">
دسته بندی <span className="bg-green-600 text-white p-1 rounded-md font-normal">#{allbooks?.subCategory?.name}</span>
</span>
<h2 className="mt-6 mb-4 font-bold text-gray-600 text-2xl md:text-7xl lg:text-2xl font-heading ">
{allbooks.bookName}
</h2>
<p className="flex items-center mb-6">
<span className="mr-2 text-md text-green-600 font-bold">
کدکتاب :
<div className="w-full lg:w-1/2 px-4">
<div className="max-w-md mb-6">
<span className="text-xs text-gray-500 font-bold tracking-wider">
دسته بندی{" "}
<span className="bg-green-600 text-white p-1 rounded-md font-normal">
#{allbooks?.subCategory?.name}
</span>
</span>
<span className="text-3xl border-b-2 text-green-600 font-bold">
{Pn.convertEnToPe(allbooks.id)}
</span>
</p>
<p className="text-lg text-gray-400 text-justify">
کتاب {allbooks.bookName} در حال حاظر در دانشکده{" "}
{allbooks?.library?.libraryName} در قفسه {allbooks.shelfName} می باشد و شما با کد کتاب {Pn.convertEnToPe(allbooks.id)} میتوانید به صورت حضوری کتاب خود را دریافت کنید
</p>
</div>

<div>
<h4 className="mb-6 text-gray-700 font-semibold font-heading ">جزییات کتاب :</h4>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg text-gray-700 text-right font-heading font-medium">
نویسندگان : {allbooks?.authorName?.map((value,index)=>{
return value+" "
})}
</h3>
</button>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg text-gray-700 font-medium text-right font-heading ">
مترجمان : {allbooks?.translatorName?.map((value,index)=>{
return value+" "
})}
</h3>
</button>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg text-gray-700 font-medium text-right font-heading ">
انتشارات : {allbooks.publisherName}
</h3>
</button>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg font-heading text-gray-700 font-medium">
تعداد صفحات : {Pn.convertEnToPe(allbooks.numberPage)}
</h3>
</button>

</div>

<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 disabled opacity-50 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"

>
{allbooks.totalEntity >0 ? <span className="font-semibold text-black">کتاب موجود است و میتوانید حضوری کتاب را امانت بگیرید</span> : <span className="text-black font-semibold">کتاب در حال حاظر توسط شخص دیگری به امانت گرفته شده است</span>}
<h2 className="mt-6 mb-4 font-bold text-gray-600 text-2xl md:text-7xl lg:text-2xl font-heading ">
{allbooks.bookName}
</h2>
<p className="flex items-center mb-6">
<span className="mr-2 text-md text-green-600 font-bold">
کدکتاب :
</span>
<span className="text-3xl border-b-2 text-green-600 font-bold">
{Pn.convertEnToPe(allbooks.id)}
</span>
</p>
<p className="text-lg text-gray-400 text-justify">
کتاب {allbooks.bookName} در حال حاظر در دانشکده{" "}
{allbooks?.library?.libraryName} در قفسه{" "}
{allbooks.shelfName} می باشد و شما با کد کتاب{" "}
{Pn.convertEnToPe(allbooks.id)} میتوانید به صورت حضوری کتاب
خود را دریافت کنید
</p>
</div>

<div>
<h4 className="mb-6 text-gray-700 font-semibold font-heading ">
جزییات کتاب :
</h4>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg text-gray-700 text-right font-heading font-medium">
نویسندگان :{" "}
{allbooks?.authorName?.map((value, index) => {
return value + " ";
})}
</h3>
</button>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg text-gray-700 font-medium text-right font-heading ">
مترجمان :{" "}
{allbooks?.translatorName?.map((value, index) => {
return value + " ";
})}
</h3>
</button>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg text-gray-700 font-medium text-right font-heading ">
انتشارات : {allbooks.publisherName}
</h3>
</button>
<button className="flex w-full md:w-2/3 pl-6 lg:pl-12 pr-6 py-4 mb-4 justify-between items-center leading-7 rounded-2xl border-2 border-greenGray-200 hover:border-greenGray-300">
<h3 className="text-lg font-heading text-gray-700 font-medium">
تعداد صفحات : {Pn.convertEnToPe(allbooks.numberPage)}
</h3>
</button>
</div>

</a>
<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">
{allbooks.totalEntity > 0 ? (
<span className="font-semibold text-gray-100">
کتاب موجود است و میتوانید حضوری کتاب را امانت بگیرید
</span>
) : (
<span className="text-gray-100 font-semibold">
کتاب در حال حاظر توسط شخص دیگری به امانت گرفته شده است
</span>
)}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>}
<div id="pos-article-display-93620"></div>
</section>
)}
<div id="pos-article-display-93620"></div>
</>
);
}
Loading

0 comments on commit fe2a364

Please sign in to comment.