From 2b9a8c0ce34962c3d8d83405a4081bad188ab342 Mon Sep 17 00:00:00 2001
From: Sunday <phamhoangson99@gmail.com>
Date: Mon, 2 Sep 2024 22:30:27 +0700
Subject: [PATCH] update mangas

---
 .../pages/event/kaia-island/Artwork.tsx       |   2 +-
 .../pages/event/pudgy-asia-tour/Mangas.tsx    | 102 ++++++++++++++++++
 src/pages/events/pudgy-asia-tour/page.tsx     |   2 +
 3 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 src/components/pages/event/pudgy-asia-tour/Mangas.tsx

diff --git a/src/components/pages/event/kaia-island/Artwork.tsx b/src/components/pages/event/kaia-island/Artwork.tsx
index 265e0ba1..6d136619 100644
--- a/src/components/pages/event/kaia-island/Artwork.tsx
+++ b/src/components/pages/event/kaia-island/Artwork.tsx
@@ -129,7 +129,7 @@ export default function Artworks() {
               {latestComic.loading
                 ? Array.apply(null, Array(10)).map((d, index) => <DummyComic key={index} />)
                 : useableComic?.length
-                ? useableComic.map((data, index) => <Manga key={index} {...data} />)
+                ? useableComic?.slice((page - 1) * 10, page * 10)?.map((data, index) => <Manga key={index} {...data} />)
                 : null}
             </>
           )}
diff --git a/src/components/pages/event/pudgy-asia-tour/Mangas.tsx b/src/components/pages/event/pudgy-asia-tour/Mangas.tsx
new file mode 100644
index 00000000..e9c52403
--- /dev/null
+++ b/src/components/pages/event/pudgy-asia-tour/Mangas.tsx
@@ -0,0 +1,102 @@
+import { Pagination } from '@mui/material'
+import DummyComic from 'components/DummyComponent/comic'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Fragment, useEffect, useState } from 'react'
+import { isMobile } from 'react-device-detect'
+import { useTranslation } from 'react-i18next'
+import useApi from 'src/hooks/useApi'
+import { IComic } from 'src/models/comic'
+import { getLatestComic } from 'src/services'
+
+export default function Mangas() {
+  const { t } = useTranslation()
+  const latestComic = useApi<IComic[]>(getLatestComic, true, [])
+  const [page, setPage] = useState(1)
+  const [useableComic, setUseableComic] = useState<any>()
+  useEffect(() => {
+    const comic = latestComic.data?.filter(
+      (data: any) =>
+        data.tags.some((lang: any) => lang.en.toLowerCase() === 'invent contest') &&
+        data.tags.some((lang: any) => lang.en.toLowerCase() === 'pudgy asia tour')
+    )
+    setUseableComic(comic)
+  }, [latestComic.data])
+  if (!useableComic?.data?.length) return null
+  return (
+    <div className='pt-20 pk-container'>
+      <div className='uppercase text-white text-center w-full drop-shadow-[2px_2px_0px_#000] trailer-font text-[36px] md:text-[64px] leading-[47px] md:leading-[84px] font-black text-stroke'>
+        {t('Mangas')}
+      </div>
+      <div className='flex gap-8 md:gap-16 mt-8 md:mt-16 flex-col items-center'>
+        <div className='grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(270px,1fr))] gap-4 md:gap-8 w-full'>
+          {latestComic.loading
+            ? null
+            : useableComic.data?.length
+            ? useableComic.slice((page - 1) * 12, page * 12).map((data, index) => <Manga key={index} {...data} />)
+            : null}
+        </div>
+        {!!useableComic?.data?.length && (
+          <Pagination
+            shape='rounded'
+            page={page}
+            className='[&_.Mui-selected]:!bg-[#FABA77] [&_.Mui-selected]:!text-text-primary [&_.MuiPaginationItem-root:not(.Mui-selected)]:!text-text-quatenary'
+            onChange={(event: React.ChangeEvent<unknown>, value: number) => {
+              setPage(value)
+            }}
+            count={Math.ceil(useableComic.data?.length / 12)}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+const Manga = (props) => {
+  const router = useRouter()
+  const { t } = useTranslation()
+  return (
+    <Link
+      href={isMobile ? `/comic/${props.slug}` : `/comic/${props.slug}/chapter/1`}
+      className='[&:hover_.shadow]:visible relative'>
+      <div className='relative'>
+        <div className='absolute w-full h-full -bottom-1.5 -right-1.5 bg-black rounded-xl invisible shadow'></div>
+        <Image
+          width={400}
+          height={600}
+          src={props.image}
+          alt=''
+          className=' relative w-full aspect-[164/230] object-cover rounded-xl border border-black'
+        />
+      </div>
+      <div className='hidden lg:block mt-4'>
+        <div className='trailer-font font-black text-[32px] leading-[47px]'>{props['en'].title}</div>
+        <div className='estedad-font text-[24px] leading-[35px] font-semibold flex gap-1'>
+          by{' '}
+          <span>
+            {props.authors.map((author, index) => (
+              <Fragment key={index}>
+                <span className=' first:hidden'>, </span>
+                <span className=''>
+                  {author.slug ? (
+                    <div
+                      className='author'
+                      onClick={(e) => {
+                        router.push(`/artist/${author.slug}`)
+                        e.stopPropagation()
+                        e.preventDefault()
+                      }}>
+                      {t(author.name)}
+                    </div>
+                  ) : (
+                    t(author.name)
+                  )}
+                </span>
+              </Fragment>
+            ))}
+          </span>
+        </div>
+      </div>
+    </Link>
+  )
+}
diff --git a/src/pages/events/pudgy-asia-tour/page.tsx b/src/pages/events/pudgy-asia-tour/page.tsx
index 813553ea..63015cdb 100644
--- a/src/pages/events/pudgy-asia-tour/page.tsx
+++ b/src/pages/events/pudgy-asia-tour/page.tsx
@@ -20,6 +20,7 @@ import Rule1 from 'components/pages/event/pudgy-asia-tour/assets/rule1.png'
 import Rule1VN from 'components/pages/event/pudgy-asia-tour/assets/rule1vn.png'
 import Rule2 from 'components/pages/event/pudgy-asia-tour/assets/rule2.png'
 import Rule3 from 'components/pages/event/pudgy-asia-tour/assets/rule3.png'
+import Mangas from 'components/pages/event/pudgy-asia-tour/Mangas'
 export default function Pudgy() {
   const { locale } = useRouter()
   const { t } = useTranslation()
@@ -243,6 +244,7 @@ export default function Pudgy() {
         </div>
         <TimeLine />
         <PudgyList />
+        <Mangas/>
         <div className='mt-28 -mb-14 flex justify-center overflow-hidden'>
           <FooterAnimationSection />
         </div>