From ea688ed9bcfbd2b54dfd1660a3d659bff9e2411e Mon Sep 17 00:00:00 2001
From: imhson <phamhoangson99@gmail.com>
Date: Thu, 8 Aug 2024 16:38:47 +0700
Subject: [PATCH] update pc

---
 src/components/pages/artist/Artworks.tsx    | 30 +++++----
 src/components/pages/artist/Collections.tsx |  4 +-
 src/components/pages/artist/Contests.tsx    | 31 ++++++---
 src/components/pages/artist/Mangas.tsx      |  4 +-
 src/pages/artist/[artist]/artist.tsx        | 74 ++++++++++++++++++---
 5 files changed, 108 insertions(+), 35 deletions(-)

diff --git a/src/components/pages/artist/Artworks.tsx b/src/components/pages/artist/Artworks.tsx
index 094ce28..2b8a268 100644
--- a/src/components/pages/artist/Artworks.tsx
+++ b/src/components/pages/artist/Artworks.tsx
@@ -45,21 +45,23 @@ export default function ArtworkList({ id }) {
       {data?.artworks?.length ? (
         <>
           <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>
+            <div className='lg:max-w-[50vw]'>
+              <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>
+            </div>
           </Modal>
-          <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4'>
+          <div className='grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-4'>
             {data?.artworks?.slice((page - 1) * 12, page * 12)?.map((artwork, index) => (
               <div
                 key={index}
diff --git a/src/components/pages/artist/Collections.tsx b/src/components/pages/artist/Collections.tsx
index 7e62c20..fb33fac 100644
--- a/src/components/pages/artist/Collections.tsx
+++ b/src/components/pages/artist/Collections.tsx
@@ -33,7 +33,7 @@ export default function CollectionList({ id }) {
           {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'
+              className='w-full bg-white rounded-mlg p-4 lg:border lg:border-border-secondary'
               key={launchpad.id}>
               <div className='grid gap-2 grid-cols-3'>
                 <Image
@@ -96,7 +96,7 @@ export default function CollectionList({ id }) {
         </div>
       )}
       {!!data?.count && (
-        <div className='w-full flex justify-center mt-4'>
+        <div className='w-full flex justify-center mt-8'>
           <Pagination
             shape='rounded'
             count={Math.ceil(data?.count / 4)}
diff --git a/src/components/pages/artist/Contests.tsx b/src/components/pages/artist/Contests.tsx
index 5cfac3a..f34fee3 100644
--- a/src/components/pages/artist/Contests.tsx
+++ b/src/components/pages/artist/Contests.tsx
@@ -44,7 +44,7 @@ export default function Contests({ id }) {
     )
   if (contestData) {
     return (
-      <div className='-mt-4'>
+      <div className='-mt-4 lg:mt-0'>
         <div className='text-sm font-medium flex items-center justify-between'>
           <div
             className='flex items-center text-text-primary-on-brand cursor-pointer'
@@ -58,22 +58,23 @@ export default function Contests({ id }) {
                 strokeLinejoin='round'
               />
             </svg>
-            {t('Back')}
+            <span className='lg:hidden'>{t('Back')}</span>
+            <span className='lg:block hidden'>{selectedContest[locale].title}</span>
           </div>
           <Link href={`/events/${selectedContest.slug}`} className='text-text-info-primary'>
             {t('View Contest')}
           </Link>
         </div>
         <div className='mt-3 text-sm font-semibold'>{t('Mangas')}</div>
-        <div className='mt-4 gap-6 grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))]'>
-          {contestData.mangas.map((manga,index) => (
+        <div className='mt-4 gap-6 lg:gap-2.5 grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))]'>
+          {contestData.mangas.map((manga, index) => (
             <div className='' key={index}>
               <Manga {...manga} />
             </div>
           ))}
         </div>
-        <div className='mt-8 text-sm font-semibold'>{t('Artworks')}</div>
-        <div className='mt-4 gap-4 grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))]'>
+        <div className='mt-8 lg:mt-4 text-sm font-semibold'>{t('Artworks')}</div>
+        <div className='mt-4 gap-4 grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] lg:grid-cols-[repeat(auto-fill,minmax(250px,1fr))]'>
           {contestData?.artworks?.artworks?.slice((artworkPage - 1) * 12, artworkPage * 12)?.map((artwork, index) => (
             <div
               key={index}
@@ -91,6 +92,18 @@ export default function Contests({ id }) {
             </div>
           ))}
         </div>
+        {!!data?.count && (
+          <div className='w-full flex justify-center mt-8 lg:mt-4'>
+            <Pagination
+              shape='rounded'
+              count={Math.ceil(contestData?.artworks?.artworks?.length / 12)}
+              page={artworkPage}
+              onChange={(event: React.ChangeEvent<unknown>, value: number) => {
+                setArtworkPage(value)
+              }}
+            />
+          </div>
+        )}
         <Modal open={open} setOpen={setOpen} preventClickOutsideToClose={false}>
           <Swiper slidesPerView={1} autoHeight initialSlide={index}>
             {contestData?.artworks?.artworks?.map((artwork, index) => (
@@ -100,7 +113,7 @@ export default function Contests({ id }) {
                   height={300}
                   src={artwork.url}
                   alt=''
-                  className='w-full h-auto rounded-md object-cover'
+                  className='w-full h-auto rounded-md object-cover lg:max-w-[40vw]'
                 />
               </SwiperSlide>
             ))}
@@ -117,7 +130,7 @@ export default function Contests({ id }) {
             <div
               onClick={() => setSelectedContest(contest)}
               key={contest.slug}
-              className='rounded-mlg p-4 bg-white relative'>
+              className='rounded-mlg p-4 bg-white relative lg:border lg:border-border-secondary cursor-pointer'>
               <div className='relative'>
                 <Image
                   src={contest[locale].image}
@@ -158,7 +171,7 @@ export default function Contests({ id }) {
         </div>
       )}
       {!!data?.count && (
-        <div className='w-full flex justify-center mt-4'>
+        <div className='w-full flex justify-center mt-8'>
           <Pagination
             shape='rounded'
             count={Math.ceil(data?.count / 4)}
diff --git a/src/components/pages/artist/Mangas.tsx b/src/components/pages/artist/Mangas.tsx
index 748185b..3a1c5c6 100644
--- a/src/components/pages/artist/Mangas.tsx
+++ b/src/components/pages/artist/Mangas.tsx
@@ -27,7 +27,7 @@ export default function MangaList({ id }) {
     )
   }
   return (
-    <div>
+    <div className='w-full'>
       {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) => (
@@ -37,7 +37,7 @@ export default function MangaList({ id }) {
           ))}
         </div>
       ) : (
-        <div className='flex flex-col items-center gap-4 py-8'>
+        <div className='flex flex-col items-center gap-4 py-8 mx-auto w-full'>
           <Image src={Mc} alt='' className='w-[160px] h-[160px]' />
           <div className='font-medium'>{t('No manga found')}</div>
         </div>
diff --git a/src/pages/artist/[artist]/artist.tsx b/src/pages/artist/[artist]/artist.tsx
index 82ec3b8..effc328 100644
--- a/src/pages/artist/[artist]/artist.tsx
+++ b/src/pages/artist/[artist]/artist.tsx
@@ -9,6 +9,7 @@ import NoImg from 'images/avatar.svg'
 import moment from 'moment'
 import getConfig from 'next/config'
 import Image from 'next/image'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -29,8 +30,51 @@ function Artist({ artistDetail, data }) {
   const seekhypeBaseUrl = new URL(getConfig().SEEKHYPE_URL).origin
   if (!artist) return <></>
   return (
-    <div className='pk-container pt-8 flex flex-col gap-8'>
-      <div className='bg-white px-4 rounded-mlg p-8 flex flex-col gap-8 items-center'>
+    <div className='pk-container pt-8 flex flex-col gap-8 lg:flex-row'>
+      <div className='bg-white px-4 rounded-mlg p-8 flex flex-col gap-8 items-center lg:w-[343px] lg:shrink-0 relative'>
+        <div className='absolute top-5 right-5 flex gap-3'>
+          {artist.link?.behance && (
+            <Link href={artist.link?.behance} target='_blank'>
+              <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                <circle cx='16' cy='16' r='16' fill='#105DFB' />
+                <path
+                  fillRule='evenodd'
+                  clipRule='evenodd'
+                  d='M6.875 21.9597V9.74365H12.5223C14.3362 9.74365 15.8066 11.2141 15.8066 13.028C15.8066 14.1807 15.4522 14.8947 14.1526 15.6272C15.7078 16.3358 16.1397 17.3178 16.1397 18.6877C16.1397 20.5408 14.4935 21.9597 12.6404 21.9597H6.875ZM9.26468 11.7658V14.7033H12.0616C12.0616 14.7033 13.4209 14.7033 13.4209 13.2346C13.4209 11.7658 12.0616 11.7658 12.0616 11.7658H9.26468ZM9.26468 19.8908V16.7189H12.2647C12.7491 16.7189 13.7647 16.9689 13.7647 18.4689C13.7647 19.5814 12.7647 19.8804 12.2647 19.8908H9.26468Z'
+                  fill='white'
+                />
+                <path
+                  fillRule='evenodd'
+                  clipRule='evenodd'
+                  d='M21.2491 13.1096C19.5303 13.1096 16.9834 14.3439 16.9834 17.6252C16.9834 19.6232 18.0772 22.1877 21.3584 22.1877C23.9834 22.1877 25.1918 20.2606 25.4678 19.2971H22.9991C22.8741 19.7346 22.3897 20.2189 21.3584 20.2189C19.8584 20.2189 19.3272 18.9377 19.2491 18.2971H25.4678V17.6252C25.4678 14.3439 22.9678 13.1096 21.2491 13.1096ZM21.2491 14.9846C19.8491 14.9846 19.3324 16.1408 19.2491 16.7189H22.9991C22.9991 16.1408 22.6491 14.9846 21.2491 14.9846Z'
+                  fill='white'
+                />
+                <path d='M18.2647 10.4377V11.9533H24.1553V10.4377H18.2647Z' fill='white' />
+              </svg>
+            </Link>
+          )}
+          {artist.link?.website && (
+            <Link href={artist.link.website} target='_blank'>
+              <svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                <path
+                  d='M0.5 16C0.5 7.43959 7.43959 0.5 16 0.5C24.5604 0.5 31.5 7.43959 31.5 16C31.5 24.5604 24.5604 31.5 16 31.5C7.43959 31.5 0.5 24.5604 0.5 16Z'
+                  fill='white'
+                />
+                <path
+                  d='M0.5 16C0.5 7.43959 7.43959 0.5 16 0.5C24.5604 0.5 31.5 7.43959 31.5 16C31.5 24.5604 24.5604 31.5 16 31.5C7.43959 31.5 0.5 24.5604 0.5 16Z'
+                  stroke='#B0B0B0'
+                />
+                <path
+                  d='M12.1495 14.4921L10.2883 16.3533C9.59317 17.0485 9.19343 17.9943 9.20074 18.9883C9.20804 19.9823 9.59903 20.9338 10.3271 21.6395C11.0327 22.3676 11.9845 22.7585 12.9783 22.7658C13.9948 22.7733 14.9183 22.3961 15.6134 21.701L17.4746 19.8398M19.852 17.5079L21.7132 15.6467C22.4083 14.9516 22.808 14.0058 22.8007 13.0118C22.7934 12.0177 22.4024 11.0662 21.6743 10.3606C20.9689 9.65516 20.0173 9.26415 19.0233 9.25684C18.0293 9.24954 17.0834 9.62658 16.3882 10.3217L14.527 12.1829M13.1783 18.7726L18.762 13.189'
+                  stroke='#6D6D6D'
+                  strokeWidth='1.5'
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                />
+              </svg>
+            </Link>
+          )}
+        </div>
         <div className='flex flex-col items-center gap-3'>
           <Image
             src={artist?.avatar || NoImg}
@@ -79,7 +123,7 @@ function Artist({ artistDetail, data }) {
           </div>
         </div>
       </div>
-      <div>
+      <div className='lg:flex-1 lg:p-8 lg:bg-white lg:rounded-mlg'>
         <div className='flex gap-4 text-sm text-text-teriary font-semibold w-full'>
           <div
             className={`py-1 px-2 rounded-lg cursor-pointer ${
@@ -95,7 +139,21 @@ function Artist({ artistDetail, data }) {
             onClick={() => setTab('artworks')}>
             {t('Artworks')}
           </div>
-          <div>
+          <div
+            className={`py-1 px-2 hidden lg:block rounded-lg cursor-pointer ${
+              tab == 'collections' ? 'bg-brand-100 text-text-brand-defaul' : ''
+            }`}
+            onClick={() => setTab('collections')}>
+            {t('NFT Collections')}
+          </div>
+          <div
+            className={`py-1 px-2 hidden lg:block rounded-lg cursor-pointer ${
+              tab == 'contests' ? 'bg-brand-100 text-text-brand-defaul' : ''
+            }`}
+            onClick={() => setTab('contests')}>
+            {t('Contests')}
+          </div>
+          <div className='lg:hidden'>
             <Dropdown>
               <DropdownToggle>
                 <div className='flex items-center'>
@@ -121,17 +179,17 @@ function Artist({ artistDetail, data }) {
                 <div className='p-2.5'>
                   <div
                     onClick={() => setTab('collections')}
-                    className={`py-3 font-semibold border-b border-border-teriary ${
+                    className={`py-3 font-semibold border-b border-border-teriary cursor-pointer ${
                       tab == 'collections' ? 'text-text-brand-defaul' : 'text-text-primary'
                     }`}>
-                    NFT Collections
+                    {t('NFT Collections')}
                   </div>
                   <div
                     onClick={() => setTab('contests')}
-                    className={`py-3 font-semibold ${
+                    className={`py-3 font-semibold cursor-pointer ${
                       tab == 'contests' ? 'text-text-brand-defaul' : 'text-text-primary'
                     }`}>
-                    Contests
+                    {t('Contests')}
                   </div>
                 </div>
               </DropdownMenu>