update creator

aura-nw · Aug 6, 2024 · f0c7e9b · f0c7e9b
1 parent f2d0a9e
commit f0c7e9b
Show file tree

Hide file tree

Showing 7 changed files with 262 additions and 63 deletions.
diff --git a/src/components/pages/artist/Artworks.tsx b/src/components/pages/artist/Artworks.tsx
@@ -1,26 +1,35 @@
 import { Pagination, Skeleton } from '@mui/material'
 import Mc from 'assets/images/mascot-empty.png'
 import Image from 'next/image'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getArtistArtworks } from 'src/services'
 import useSWR from 'swr'
 import Manga from '../homepage/manga'
+import Modal from 'components/Modal'
+
+import 'swiper/css'
+import 'swiper/css/grid'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Controller } from 'swiper/modules'
 export default function ArtworkList({ id }) {
   const [page, setPage] = useState(1)
+  const [open, setOpen] = useState(false)
+  const [index, setIndex] = useState(1)
   const { data, isLoading } = useSWR(
     {
       key: 'fetch-artist-artworks',
       id,
-      page,
     },
-    ({ id, page }) => (id ? getArtistArtworks(id, (page - 1) * 12) : null)
+    ({ id }) => (id ? getArtistArtworks(id) : null)
   )
 
   const { t } = useTranslation()
   if (isLoading) {
     return (
-      <div className='grid grid-cols-2 gap-4'>
+      <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4'>
         {Array(6)
           .fill(0)
           ?.map((c, index) => (
@@ -34,25 +43,53 @@ export default function ArtworkList({ id }) {
   return (
     <div>
       {data?.artworks?.length ? (
-        <div className='grid grid-cols-2 gap-4'>
-          {data?.artworks?.map((comic, index) => (
-            <div key={index}>
-              <Manga {...comic} />
-            </div>
-          ))}
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-        </div>
+        <>
+          <Modal open={open} setOpen={setOpen} preventClickOutsideToClose={false}>
+            <Swiper slidesPerView={1} autoHeight initialSlide={index} >
+              {data?.artworks?.map((artwork, index) => (
+                <SwiperSlide key={index}>
+                  <Image
+                    width={300}
+                    height={300}
+                    src={artwork.url}
+                    alt=''
+                    className='w-full h-auto rounded-md object-cover'
+                  />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </Modal>
+          <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4'>
+            {data?.artworks?.slice((page - 1) * 12, page * 12)?.map((artwork, index) => (
+              <div
+                key={index}
+                onClick={() => {
+                  setIndex(index)
+                  setOpen(true)
+                }}>
+                <Image
+                  width={300}
+                  height={300}
+                  src={artwork.url}
+                  alt=''
+                  className='w-full aspect-square rounded-md object-cover'
+                />
+              </div>
+            ))}
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </>
       ) : (
         <div className='flex flex-col items-center gap-4 py-8'>
           <Image src={Mc} alt='' className='w-[160px] h-[160px]' />
           <div className='font-medium'>{t('No artwork found')}</div>
         </div>
       )}
       {!!data?.artworks_aggregate?.aggregate?.count && (
-        <div className='w-full flex justify-center -mt-8'>
+        <div className='w-full flex justify-center'>
           <Pagination
             shape='rounded'
             count={Math.ceil(data?.artworks_aggregate?.aggregate?.count / 12)}

diff --git a/src/components/pages/artist/Collections.tsx b/src/components/pages/artist/Collections.tsx
@@ -1,38 +1,105 @@
-import { Pagination } from '@mui/material'
-import Manga from '../homepage/manga'
-import { useState } from 'react'
+import { Pagination, Skeleton } from '@mui/material'
 import Mc from 'assets/images/mascot-empty.png'
 import Image from 'next/image'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-export default function CollectionList({ list }) {
+import { getArtistArtworks, getArtistCollections } from 'src/services'
+import useSWR from 'swr'
+import Manga from '../homepage/manga'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+export default function CollectionList({ id }) {
   const [page, setPage] = useState(1)
-  console.log(list)
+  const { data, isLoading } = useSWR({ key: 'get-artist-collection', id }, ({ id }) =>
+    id ? getArtistCollections(id) : null
+  )
   const { t } = useTranslation()
+  const { locale } = useRouter()
+  if (isLoading) {
+    ;<div className='grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4'>
+      {Array(6)
+        .fill(0)
+        .map((_, i) => (
+          <div key={i}>
+            <Skeleton className='w-full aspect-[343/289]' />
+          </div>
+        ))}
+    </div>
+  }
   return (
     <div>
-      {list?.length ? (
-        <div className='grid grid-cols-2 gap-y-8 gap-x-[22px]'>
-          {list?.slice((page - 1) * 20, page * 20)?.map((comic, index) => (
-            <div key={index}>
-              <Manga {...comic} />
-            </div>
+      {data?.count ? (
+        <div className='grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4'>
+          {data?.launchpads?.slice((page - 1) * 4, page * 4)?.map((launchpad, index) => (
+            <Link
+              href={`/collections/${launchpad.slug}`}
+              className='w-full bg-white rounded-mlg p-4'
+              key={launchpad.id}>
+              <div className='grid gap-2 grid-cols-3'>
+                <Image
+                  alt=''
+                  src={launchpad.featured_images[0]}
+                  width={343}
+                  height={289}
+                  className={`object-cover w-full rounded-mlg ${
+                    launchpad.featured_images[2]
+                      ? 'aspect-[239/235] col-span-2'
+                      : 'aspect-[311/199] md:aspect-[373/235] col-span-3'
+                  }`}
+                />
+                {launchpad.featured_images[2] && (
+                  <div className={`flex flex-col gap-2 w-full col-span-1`}>
+                    <Image
+                      alt=''
+                      src={launchpad.featured_images[1]}
+                      width={343}
+                      height={289}
+                      className={`object-cover h-full rounded-mlg aspect-[126/113]`}
+                    />
+                    <Image
+                      alt=''
+                      src={launchpad.featured_images[2]}
+                      width={343}
+                      height={289}
+                      className={`object-cover h-full rounded-mlg aspect-[126/114]`}
+                    />
+                  </div>
+                )}
+              </div>
+              <div className='mt-4 flex items-center gap-2'>
+                {launchpad.launchpad_creator.avatar_url && (
+                  <Image
+                    src={launchpad.launchpad_creator.avatar_url}
+                    alt=''
+                    width={36}
+                    height={36}
+                    className='rounded-full w-[36px] h-[36px]'
+                  />
+                )}
+                <div>
+                  <div className='text-sm font-medium'>{launchpad[locale].name}</div>
+                  <div className='text-xs font-medium'>
+                    {t('by')}{' '}
+                    <Link href={`/artist/${launchpad.launchpad_creator.slug}`} className='text-text-brand-defaul'>
+                      {launchpad.launchpad_creator.pen_name}
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </Link>
           ))}
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
         </div>
       ) : (
         <div className='flex flex-col items-center gap-4 py-8'>
           <Image src={Mc} alt='' className='w-[160px] h-[160px]' />
           <div className='font-medium'>{t('No collection found')}</div>
         </div>
       )}
-      {!!list.length && (
-        <div className='w-full flex justify-center -mt-8'>
+      {!!data?.count && (
+        <div className='w-full flex justify-center mt-4'>
           <Pagination
             shape='rounded'
-            count={Math.ceil(list?.length / 20)}
+            count={Math.ceil(data?.count / 4)}
             page={page}
             onChange={(event: React.ChangeEvent<unknown>, value: number) => {
               setPage(value)

diff --git a/src/components/pages/artist/Contests.tsx b/src/components/pages/artist/Contests.tsx
@@ -7,17 +7,16 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getContests } from 'src/services'
 import useSWR from 'swr'
-export const Contests = ({ id }) => {
+export default function Contests({ id }) {
   const [page, setPage] = useState(1)
   const { t } = useTranslation()
   const { locale } = useRouter()
   const { data, isLoading } = useSWR(
     {
       key: 'fetch-artist-contest',
       id,
-      page,
     },
-    ({ id, page }) => (id ? getContests(id, (page - 1) * 4) : null)
+    ({ id }) => (id ? getContests(id) : null)
   )
 
   if (isLoading)
@@ -27,6 +26,7 @@ export const Contests = ({ id }) => {
         <Skeleton className='w-full aspect-[343/256]' />
       </div>
     )
+    console.log(data)
   return (
     <div>
       {data?.contest?.length ? (

diff --git a/src/components/pages/artist/Mangas.tsx b/src/components/pages/artist/Mangas.tsx
@@ -1,37 +1,52 @@
-import { Pagination } from '@mui/material'
-import Manga from '../homepage/manga'
-import { useState } from 'react'
+import { Pagination, Skeleton } from '@mui/material'
 import Mc from 'assets/images/mascot-empty.png'
 import Image from 'next/image'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-export default function MangaList({ list }) {
+import { getArtistMangas } from 'src/services'
+import useSWR from 'swr'
+import Manga from '../homepage/manga'
+export default function MangaList({ id }) {
+  const { data, isLoading } = useSWR({
+    key: 'fetch-artist-mangas',
+    id,
+  }, ({id}) => id ? getArtistMangas(id):null)
   const [page, setPage] = useState(1)
   const { t } = useTranslation()
+  if (isLoading) {
+    return (
+      <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-y-8 gap-x-[22px]'>
+        {Array(10)
+          .fill(0)
+          ?.map((c, index) => (
+            <div key={index}>
+              <Skeleton className='w-full aspect-[16/23]' />
+            </div>
+          ))}
+      </div>
+    )
+  }
   return (
     <div>
-      {list?.length ? (
-        <div className='grid grid-cols-2 gap-y-8 gap-x-[22px]'>
-          {list?.slice((page - 1) * 20, page * 20)?.map((comic, index) => (
+      {data?.length ? (
+        <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-y-8 gap-x-[22px]'>
+          {data?.slice((page - 1) * 20, page * 20)?.map((comic, index) => (
             <div key={index}>
               <Manga {...comic} />
             </div>
           ))}
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
         </div>
       ) : (
-        <div className='flex flex-col items-center gap-4'>
+        <div className='flex flex-col items-center gap-4 py-8'>
           <Image src={Mc} alt='' className='w-[160px] h-[160px]' />
           <div className='font-medium'>{t('No manga found')}</div>
         </div>
       )}
-      {!!list.length && (
-        <div className='w-full flex justify-center -mt-8'>
+      {!!data?.length && (
+        <div className='w-full flex justify-center mt-8'>
           <Pagination
             shape='rounded'
-            count={Math.ceil(list?.length / 20)}
+            count={Math.ceil(data?.length / 20)}
             page={page}
             onChange={(event: React.ChangeEvent<unknown>, value: number) => {
               setPage(value)

diff --git a/src/components/pages/homepage/manga.tsx b/src/components/pages/homepage/manga.tsx
@@ -27,7 +27,7 @@ export default function Manga(props: IComic) {
   return (
     <Link
       href={isMobile ? `/comic/${props.slug}` : `/comic/${props.slug}/chapter/1`}
-      className='w-full aspect-[16/23] rounded-[4px] relative overflow-hidden'>
+      className='w-full block aspect-[16/23] rounded-md relative overflow-hidden'>
       <Image
         src={props.image || NoImage}
         alt=''

diff --git a/src/pages/artist/[artist]/artist.tsx b/src/pages/artist/[artist]/artist.tsx
@@ -1,5 +1,7 @@
 import Dropdown, { DropdownMenu, DropdownToggle } from 'components/Dropdown'
+import ArtworkList from 'components/pages/artist/Artworks'
 import CollectionList from 'components/pages/artist/Collections'
+import Contests from 'components/pages/artist/Contests'
 import MangaList from 'components/pages/artist/Mangas'
 import Manga from 'components/pages/homepage/manga'
 import DOMPurify from 'dompurify'
@@ -116,15 +118,19 @@ function Artist({ artistDetail, data }) {
                 </div>
               </DropdownToggle>
               <DropdownMenu closeOnClick>
-                <div className='p-3 space-y-2'>
+                <div className='p-2.5'>
                   <div
                     onClick={() => setTab('collections')}
-                    className={`${tab == 'collections' ? 'text-text-brand-defaul' : ''}`}>
+                    className={`py-3 font-semibold border-b border-border-teriary ${
+                      tab == 'collections' ? 'text-text-brand-defaul' : 'text-text-primary'
+                    }`}>
                     NFT Collections
                   </div>
                   <div
                     onClick={() => setTab('contests')}
-                    className={`${tab == 'contests' ? 'text-text-brand-defaul' : ''}`}>
+                    className={`py-3 font-semibold ${
+                      tab == 'contests' ? 'text-text-brand-defaul' : 'text-text-primary'
+                    }`}>
                     Contests
                   </div>
                 </div>
@@ -133,10 +139,10 @@ function Artist({ artistDetail, data }) {
           </div>
         </div>
         <div className='mt-8'>
-          {tab == 'mangas' && <MangaList list={artist.comics} />}
-          {tab == 'artworks' && <div></div>}
-          {tab == 'collections' && <CollectionList list={artist.collections} />}
-          {tab == 'contests' && <div></div>}
+          {tab == 'mangas' && <MangaList id={artist.id} />}
+          {tab == 'artworks' && <ArtworkList id={artist.id} />}
+          {tab == 'collections' && <CollectionList id={artist.id} />}
+          {tab == 'contests' && <Contests id={artist.id} />}
         </div>
       </div>
     </div>