update artist

package.json

@@ -22,6 +22,7 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@mui/x-date-pickers": "^7.11.0",
+    "@radix-ui/themes": "^3.1.1",
     "@reduxjs/toolkit": "^1.6.1",
     "@story-protocol/core-sdk": "^1.0.0-rc.11",
     "@tanstack/react-query": "^5.36.0",

src/components/pages/artist/Collections.tsx

@@ -0,0 +1,45 @@
+import { Pagination } from '@mui/material'
+import Manga from '../homepage/manga'
+import { useState } from 'react'
+import Mc from 'assets/images/mascot-empty.png'
+import Image from 'next/image'
+import { useTranslation } from 'react-i18next'
+export default function CollectionList({ list }) {
+  const [page, setPage] = useState(1)
+  console.log(list)
+  const { t } = useTranslation()
+  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>
+          ))}
+          <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'>
+          <Pagination
+            shape='rounded'
+            count={Math.ceil(list?.length / 20)}
+            page={page}
+            onChange={(event: React.ChangeEvent<unknown>, value: number) => {
+              setPage(value)
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

src/components/pages/artist/Mangas.tsx

@@ -0,0 +1,44 @@
+import { Pagination } from '@mui/material'
+import Manga from '../homepage/manga'
+import { useState } from 'react'
+import Mc from 'assets/images/mascot-empty.png'
+import Image from 'next/image'
+import { useTranslation } from 'react-i18next'
+export default function MangaList({ list }) {
+  const [page, setPage] = useState(1)
+  const { t } = useTranslation()
+  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>
+          ))}
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      ) : (
+        <div className='flex flex-col items-center gap-4'>
+          <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'>
+          <Pagination
+            shape='rounded'
+            count={Math.ceil(list?.length / 20)}
+            page={page}
+            onChange={(event: React.ChangeEvent<unknown>, value: number) => {
+              setPage(value)
+            }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

src/components/pages/event/wow-yourself/ComicList.tsx

@@ -1,6 +1,5 @@
 import DummyComic from 'components/DummyComponent/comic'
-import Comic2 from 'components/pages/homepage/comic2'
-import ComicEvent from 'components/pages/homepage/comicEvent'
+import Manga from "components/pages/homepage/manga"
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useApi from 'src/hooks/useApi'
@@ -24,7 +23,7 @@ export default function ComicList() {
         {latestComic.loading
           ? Array.apply(null, Array(20)).map((d, index) => <DummyComic key={index} />)
           : latestComic.data?.length
-          ? useableComic.map((data, index) => <Comic2 key={index} {...data} />)
+          ? useableComic.map((data, index) => <Manga key={index} {...data} />)
           : null}
         <div></div>
         <div></div>

src/components/pages/homepage/comic2.tsx → src/components/pages/homepage/manga.tsx

@@ -11,7 +11,7 @@ import UpComing from './assets/upcoming-status.png'
 import Finished from './assets/finished-status.png'
 import { isMobile } from 'react-device-detect'
 
-export default function Comic2(props: IComic) {
+export default function Manga(props: IComic) {
   const { locale } = useRouter()
   const router = useRouter()
   const { t } = useTranslation()

src/pages/_app.tsx

@@ -20,6 +20,8 @@ import ContextProvider, { Context } from 'src/context'
 import { getWagmiConfig } from 'src/services/wagmi/config'
 import 'src/styles/globals.scss'
 import { WagmiProvider } from 'wagmi'
+import '@radix-ui/themes/styles.css'
+import { Theme } from '@radix-ui/themes'
 const pjs = Plus_Jakarta_Sans({ subsets: ['latin', 'vietnamese'] })
 const ws = Work_Sans({ subsets: ['latin', 'vietnamese'] })
 const inter = Inter({ subsets: ['latin', 'vietnamese'] })