From a981b5cfb1e9e8062b40022ae87708cb2d850718 Mon Sep 17 00:00:00 2001
From: imhson <phamhoangson99@gmail.com>
Date: Wed, 26 Jul 2023 15:50:13 +0700
Subject: [PATCH] update homepage

---
 src/components/Header/index.tsx               | 154 +++++++++---------
 .../pages/chapter/readingSection.tsx          |   2 +-
 src/components/pages/homepage/comic.tsx       |  41 +++--
 .../pages/homepage/trendingComic.tsx          |  68 +++++---
 src/components/pages/profile/comic.tsx        |  54 +++---
 src/pages/comic/[comicId]/comic.tsx           |   2 +-
 6 files changed, 186 insertions(+), 135 deletions(-)

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 56d5cc94..0e6edbc4 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -47,6 +47,10 @@ export default function Header({}) {
   const [searchValue, setSearchValue] = useState('')
   const { account, wallet, logout, unlinkWallet } = useContext(Context)
   const searchComic = useApi<any[]>(async () => await search(searchValue), !!searchValue, [searchValue])
+
+  useEffect(() => {
+    ;(window as any).isSearchFocused = isSearchFocused
+  }, [isSearchFocused])
   useEffect(() => {
     ref.current?.addEventListener(
       'keypress',
@@ -116,47 +120,49 @@ export default function Header({}) {
               />
               {!!searchComic.data?.length && (
                 <div
-                  className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full w-full duration-500 p-5 rounded-[20px] flex flex-col gap-7 max-h-[40vh] overflow-auto ${
-                    isSearchFocused ? 'opacity-100' : 'pointer-events-none opacity-0 '
+                  className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full duration-500 rounded-[20px] max-h-[40vh] overflow-hidden ${
+                    isSearchFocused ? 'opacity-100 w-[160%]' : 'pointer-events-none opacity-0 w-full'
                   }`}>
-                  {searchComic.data?.map((manga, index) => (
-                    <div key={index} className='flex gap-2'>
-                      <Image
-                        src={manga.image || NoImage}
-                        width={48}
-                        height={64}
-                        className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
-                        alt=''
-                      />
-                      <div className='flex flex-col justify-between'>
-                        <div>
-                          <p
-                            className='text-second-color text-base font-bold cursor-pointer'
-                            onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
-                            {manga[locale].title}
-                          </p>
-                          <div className='text-xs'>
-                            {manga.authors.map((author, index) => (
-                              <Fragment key={index}>
-                                <span className='text-second-color font-[600] first:hidden'>, </span>
-                                <span className='text-second-color font-[600]'>{author}</span>
-                              </Fragment>
-                            ))}
+                  <div className={`max-h-[40vh] overflow-auto  flex flex-col gap-7  p-5`}>
+                    {searchComic.data?.map((manga, index) => (
+                      <div key={index} className='flex gap-2'>
+                        <Image
+                          src={manga.image || NoImage}
+                          width={48}
+                          height={64}
+                          className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
+                          alt=''
+                        />
+                        <div className='flex flex-col justify-between'>
+                          <div>
+                            <p
+                              className='text-second-color text-base font-bold cursor-pointer'
+                              onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
+                              {manga[locale].title}
+                            </p>
+                            <div className='text-xs'>
+                              {manga.authors.map((author, index) => (
+                                <Fragment key={index}>
+                                  <span className='text-second-color font-[600] first:hidden'>, </span>
+                                  <span className='text-second-color font-[600]'>{author}</span>
+                                </Fragment>
+                              ))}
+                            </div>
                           </div>
+                          {!!manga.latestChap.number && (
+                            <p className='text-xs'>
+                              Latest chap:{' '}
+                              <span
+                                className='text-second-color font-semibold cursor-pointer'
+                                onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
+                                {manga.latestChap.number}
+                              </span>
+                            </p>
+                          )}
                         </div>
-                        {!!manga.latestChap.number && (
-                          <p className='text-xs'>
-                            Latest chap:{' '}
-                            <span
-                              className='text-second-color font-semibold cursor-pointer'
-                              onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
-                              {manga.latestChap.number}
-                            </span>
-                          </p>
-                        )}
                       </div>
-                    </div>
-                  ))}
+                    ))}
+                  </div>
                 </div>
               )}
             </div>
@@ -278,47 +284,49 @@ export default function Header({}) {
             />
             {!!searchComic.data?.length && (
               <div
-                className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full duration-500 p-5 rounded-[20px] flex flex-col gap-7 max-h-[40vh] overflow-auto ${
+                className={`absolute bg-light-gray transition-all -bottom-4 translate-y-full duration-500 rounded-[20px] max-h-[40vh] overflow-hidden ${
                   isSearchFocused ? 'opacity-100 w-[160%]' : 'pointer-events-none opacity-0 w-full'
                 }`}>
-                {searchComic.data?.map((manga, index) => (
-                  <div key={index} className='flex gap-2'>
-                    <Image
-                      src={manga.image || NoImage}
-                      width={48}
-                      height={64}
-                      className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
-                      alt=''
-                    />
-                    <div className='flex flex-col justify-between'>
-                      <div>
-                        <p
-                          className='text-second-color text-base font-bold cursor-pointer'
-                          onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
-                          {manga[locale].title}
-                        </p>
-                        <div className='text-xs'>
-                          {manga.authors.map((author, index) => (
-                            <Fragment key={index}>
-                              <span className='text-second-color font-[600] first:hidden'>, </span>
-                              <span className='text-second-color font-[600]'>{author}</span>
-                            </Fragment>
-                          ))}
+                <div className={`max-h-[40vh] overflow-auto  flex flex-col gap-7  p-5`}>
+                  {searchComic.data?.map((manga, index) => (
+                    <div key={index} className='flex gap-2'>
+                      <Image
+                        src={manga.image || NoImage}
+                        width={48}
+                        height={64}
+                        className='w-12 h-16 bg-medium-gray rounded-xl object-cover'
+                        alt=''
+                      />
+                      <div className='flex flex-col justify-between'>
+                        <div>
+                          <p
+                            className='text-second-color text-base font-bold cursor-pointer'
+                            onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
+                            {manga[locale].title}
+                          </p>
+                          <div className='text-xs'>
+                            {manga.authors.map((author, index) => (
+                              <Fragment key={index}>
+                                <span className='text-second-color font-[600] first:hidden'>, </span>
+                                <span className='text-second-color font-[600]'>{author}</span>
+                              </Fragment>
+                            ))}
+                          </div>
                         </div>
+                        {!!manga.latestChap.number && (
+                          <p className='text-xs'>
+                            Latest chap:{' '}
+                            <span
+                              className='text-second-color font-semibold cursor-pointer'
+                              onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
+                              {manga.latestChap.number}
+                            </span>
+                          </p>
+                        )}
                       </div>
-                      {!!manga.latestChap.number && (
-                        <p className='text-xs'>
-                          Latest chap:{' '}
-                          <span
-                            className='text-second-color font-semibold cursor-pointer'
-                            onClick={() => router.push(`/comic/${manga.id}/chapter/${manga.latestChap.number}`)}>
-                            {manga.latestChap.number}
-                          </span>
-                        </p>
-                      )}
                     </div>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
             )}
           </div>
diff --git a/src/components/pages/chapter/readingSection.tsx b/src/components/pages/chapter/readingSection.tsx
index cb6b1533..f4f191e9 100644
--- a/src/components/pages/chapter/readingSection.tsx
+++ b/src/components/pages/chapter/readingSection.tsx
@@ -125,7 +125,7 @@ export default function ReadingSection({
 
   useEffect(() => {
     const pageHandler = (event: any) => {
-      if (!chapterData || !chapterData?.[chapterLocale]) return
+      if (!chapterData || !chapterData?.[chapterLocale] || (window as any).isSearchFocused) return
       if (event.deltaY < 0 || event.which == 37 || event.which == 38) {
         setCurrentPage((prevState) => (prevState - 2 < 0 ? 0 : prevState - 2))
       } else if (event.deltaY > 0 || event.which == 39 || event.which == 40) {
diff --git a/src/components/pages/homepage/comic.tsx b/src/components/pages/homepage/comic.tsx
index 4058b703..e6f657a9 100644
--- a/src/components/pages/homepage/comic.tsx
+++ b/src/components/pages/homepage/comic.tsx
@@ -10,10 +10,22 @@ import { IComic } from 'src/models/comic'
 
 export default function Comic(props: IComic) {
   const { locale } = useRouter()
+  const router = useRouter()
   return (
     <>
       <div className='hidden md:flex gap-[20px]'>
-        <Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3'>
+        <Link href={`/comic/${props.id}`} className='flex-auto w-1/3 xl:hidden'>
+          <Image
+            src={props.image || NoImage}
+            alt=''
+            width={180}
+            height={240}
+            className={`${
+              props.image ? 'object-cover' : 'object-contain bg-light-gray'
+            } rounded-[15px] w-[180px] aspect-[180/240]`}
+          />
+        </Link>
+        <Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3 hidden xl:block'>
           <Image
             src={props.image || NoImage}
             alt=''
@@ -27,7 +39,12 @@ export default function Comic(props: IComic) {
         <div className='flex-auto w-2/3 flex flex-col justify-between gap-[10px]'>
           <div className='flex flex-col gap-[10px]'>
             <div>
-              <Link href={`/comic/${props.id}/chapter/1`} className=' text-second-color font-bold text-[18px]'>
+              <Link href={`/comic/${props.id}`} className=' text-second-color font-bold text-[18px] xl:hidden'>
+                {props[locale].title} <StatusLabel status={props.status.type}>{props.status.text}</StatusLabel>
+              </Link>
+              <Link
+                href={`/comic/${props.id}/chapter/1`}
+                className=' text-second-color font-bold text-[18px] hidden xl:block'>
                 {props[locale].title} <StatusLabel status={props.status.type}>{props.status.text}</StatusLabel>
               </Link>
               <div>
@@ -40,7 +57,7 @@ export default function Comic(props: IComic) {
                 ))}
               </div>
             </div>
-            <div className='flex gap-[8px] '>
+            <div className='flex gap-[8px] flex-wrap'>
               {props.tags.map((tag, index) => {
                 return <Tag key={index}>{tag[locale]}</Tag>
               })}
@@ -55,14 +72,16 @@ export default function Comic(props: IComic) {
             </div>
             <div className=' text-[16px] leading-[20px] line-clamp-3'>{props[locale].description}</div>
           </div>
-          <div className='leading-[20px]'>
-            Latest:{' '}
-            <Link
-              href={`/comic/${props.id}/chapter/${props.latestChap.number}`}
-              className='text-second-color font-[600]'>
-              Chap #{props.latestChap.number}
-            </Link>
-          </div>
+          {!!props.latestChap.number && (
+            <div className='leading-[20px]'>
+              Latest:{' '}
+              <Link
+                href={`/comic/${props.id}/chapter/${props.latestChap.number}`}
+                className='text-second-color font-[600]'>
+                Chap #{props.latestChap.number}
+              </Link>
+            </div>
+          )}
         </div>
       </div>
       <div className='md:hidden'>
diff --git a/src/components/pages/homepage/trendingComic.tsx b/src/components/pages/homepage/trendingComic.tsx
index 21c2f249..0e633576 100644
--- a/src/components/pages/homepage/trendingComic.tsx
+++ b/src/components/pages/homepage/trendingComic.tsx
@@ -1,28 +1,46 @@
-import { EyeIcon } from "@heroicons/react/20/solid"
-import NoImage from "images/no_img.png"
-import Image from "next/image"
-import Link from "next/link"
-import { useRouter } from "next/router"
-import { Fragment } from "react"
-import { IComic } from "src/models/comic"
+import { EyeIcon } from '@heroicons/react/20/solid'
+import NoImage from 'images/no_img.png'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Fragment } from 'react'
+import { IComic } from 'src/models/comic'
 
 export default function TrendingComic(props: IComic) {
   const { locale } = useRouter()
   return (
     <div className='flex gap-[20px]'>
       <div className='flex-auto w-1/3'>
-        <Image
-          src={props.image || NoImage}
-          alt=''
-          width={140}
-          height={180}
-          className={`rounded-[15px] w-[140px] aspect-[14/18] ${
-            props.image ? 'object-cover' : 'object-contain bg-light-gray'
-          }`}
-        />
+        <Link href={`/comic/${props.id}`} className='flex-auto w-1/3 xl:hidden'>
+          <Image
+            src={props.image || NoImage}
+            alt=''
+            width={140}
+            height={180}
+            className={`rounded-[15px] w-[140px] aspect-[14/18] ${
+              props.image ? 'object-cover' : 'object-contain bg-light-gray'
+            }`}
+          />
+        </Link>
+        <Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3 hidden xl:block'>
+          <Image
+            src={props.image || NoImage}
+            alt=''
+            width={140}
+            height={180}
+            className={`rounded-[15px] w-[140px] aspect-[14/18] ${
+              props.image ? 'object-cover' : 'object-contain bg-light-gray'
+            }`}
+          />
+        </Link>
       </div>
       <div className='flex-auto w-2/3 flex flex-col'>
-        <div className='font-bold text-[18px]'>{props[locale].title}</div>
+        <Link href={`/comic/${props.id}`} className=' font-bold text-[18px] xl:hidden'>
+          {props[locale].title}
+        </Link>
+        <Link href={`/comic/${props.id}/chapter/1`} className=' font-bold text-[18px] hidden xl:block'>
+          {props[locale].title}
+        </Link>
         <div>
           {props.authors.map((author, index) => (
             <Fragment key={index}>
@@ -36,12 +54,16 @@ export default function TrendingComic(props: IComic) {
             <EyeIcon className='w-5 inline mr-1' /> {props.views.toLocaleString('en-US')}
           </div>
         </div>
-        <div className='mt-[10px] [20px]'>
-          Latest:{' '}
-          <Link href={`/comic/${props.id}/chapter/${props.latestChap.number}`} className='text-second-color font-[600]'>
-            Chap #{props.latestChap.number}
-          </Link>
-        </div>
+        {!!props.latestChap.number && (
+          <div className='mt-[10px] [20px]'>
+            Latest:{' '}
+            <Link
+              href={`/comic/${props.id}/chapter/${props.latestChap.number}`}
+              className='text-second-color font-[600]'>
+              Chap #{props.latestChap.number}
+            </Link>
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/pages/profile/comic.tsx b/src/components/pages/profile/comic.tsx
index 2d6e7c2f..5a8b6025 100644
--- a/src/components/pages/profile/comic.tsx
+++ b/src/components/pages/profile/comic.tsx
@@ -16,58 +16,60 @@ export default function Comic(props: IComic & { unsubscribe?: () => void; subscr
   const { locale } = useRouter()
   const [isSub, setIsSub] = useState(true)
   return (
-    <div className="flex gap-[20px]">
-      <Link href={`/comic/${props.id}/chapter/1`} className="flex-auto w-1/3">
+    <div className='flex gap-[20px]'>
+      <Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3'>
         <Image
           src={props.image || NoImage}
-          alt=""
+          alt=''
           width={180}
           height={240}
           className={`${
-            props.image ? "object-cover" : "object-contain bg-light-gray"
+            props.image ? 'object-cover' : 'object-contain bg-light-gray'
           } rounded-[15px] w-[180px] h-[240px]`}
         />
       </Link>
-      <div className="flex-auto w-2/3 flex flex-col justify-between gap-[10px]">
-        <div className="flex flex-col gap-2">
-          <Link href={`/comic/${props.id}/chapter/1`} className=" text-second-color font-bold text-[18px]">
+      <div className='flex-auto w-2/3 flex flex-col justify-between gap-[10px]'>
+        <div className='flex flex-col gap-2'>
+          <Link href={`/comic/${props.id}/chapter/1`} className=' text-second-color font-bold text-[18px]'>
             {props[locale].title} <StatusLabel status={props.status.type}>{props.status.text}</StatusLabel>
           </Link>
           <div>
-            by{" "}
+            by{' '}
             {props.authors.map((author, index) => (
               <Fragment key={index}>
-                <span className="text-second-color font-[600] first:hidden">, </span>
-                <span className="text-second-color font-[600]">{author}</span>
+                <span className='text-second-color font-[600] first:hidden'>, </span>
+                <span className='text-second-color font-[600]'>{author}</span>
               </Fragment>
             ))}
           </div>
-          <div className="flex gap-[8px] ">
+          <div className='flex gap-[8px] flex-wrap'>
             {props.tags.map((tag, index) => {
               return <Tag key={index}>{tag[locale]}</Tag>
             })}
           </div>
-          <div className=" flex gap-[24px]">
+          <div className=' flex gap-[24px]'>
             <div>
-              <strong>{props.views.toLocaleString("en-US")}</strong> views
+              <strong>{props.views.toLocaleString('en-US')}</strong> views
             </div>
             <div>
-              <strong>{props.likes.toLocaleString("en-US")}</strong> likes
+              <strong>{props.likes.toLocaleString('en-US')}</strong> likes
             </div>
           </div>
-          <div className=" text-[16px] leading-[20px] line-clamp-3">{props[locale].description}</div>
+          <div className=' text-[16px] leading-[20px] line-clamp-3'>{props[locale].description}</div>
         </div>
-        <div className="flex flex-col gap-[10px]">
-          <div className=" leading-[20px]">
-            Latest:{" "}
-            <Link href={`/comic/${props.id}/chapter/${props.latestChap.number}`} className="text-second-color font-[600]">
+        <div className='flex flex-col gap-[10px]'>
+          <div className=' leading-[20px]'>
+            Latest:{' '}
+            <Link
+              href={`/comic/${props.id}/chapter/${props.latestChap.number}`}
+              className='text-second-color font-[600]'>
               Chap #{props.latestChap.number}
             </Link>
           </div>
           {props.latestChap?.pushlishDate && (
-            <div className="leading-5">
-              New chapter arrives:{" "}
-              <span className="font-semibold">{moment(props.latestChap?.pushlishDate).format("DD/MM/YYYY")}</span>
+            <div className='leading-5'>
+              New chapter arrives:{' '}
+              <span className='font-semibold'>{moment(props.latestChap?.pushlishDate).format('DD/MM/YYYY')}</span>
             </div>
           )}
           {!!props.subscribe && (
@@ -78,8 +80,8 @@ export default function Comic(props: IComic & { unsubscribe?: () => void; subscr
                     setIsSub(false)
                     props.unsubscribe()
                   }}>
-                  <div className="h-5 flex items-center">
-                    <BellIcon className="w-6 h-6 mr-2 inline-block" />
+                  <div className='h-5 flex items-center'>
+                    <BellIcon className='w-6 h-6 mr-2 inline-block' />
                     Unsubscribe
                   </div>
                 </OutlineButton>
@@ -89,8 +91,8 @@ export default function Comic(props: IComic & { unsubscribe?: () => void; subscr
                     setIsSub(true)
                     props.subscribe()
                   }}>
-                  <div className="h-5 flex items-center">
-                    <BellAlertIcon className="w-6 h-6 mr-2 inline-block animate-[bell-ring_1s_ease-in-out]" />
+                  <div className='h-5 flex items-center'>
+                    <BellAlertIcon className='w-6 h-6 mr-2 inline-block animate-[bell-ring_1s_ease-in-out]' />
                     Subscribe
                   </div>
                 </FilledButton>
diff --git a/src/pages/comic/[comicId]/comic.tsx b/src/pages/comic/[comicId]/comic.tsx
index 4e25aaa2..1ca7cd1e 100644
--- a/src/pages/comic/[comicId]/comic.tsx
+++ b/src/pages/comic/[comicId]/comic.tsx
@@ -81,7 +81,7 @@ export default function Comic({ comicDetails, subscribe, unsubscribe }) {
                 ))}
               </div>
               <div className='text-xs mt-2 line-clamp-5'>{data[selectedLanguage.shortLang]?.description}</div>
-              <div className='flex gap-1 mt-2 '>
+              <div className='flex gap-1 mt-2 flex-wrap'>
                 {data.tags.map((tag, index) => {
                   return <Tag key={index}>{tag[selectedLanguage.shortLang]}</Tag>
                 })}