From 237208e9a1a21dd4216a8056124a6c3df2e00427 Mon Sep 17 00:00:00 2001
From: imhson <phamhoangson99@gmail.com>
Date: Tue, 5 Sep 2023 14:12:41 +0700
Subject: [PATCH] fix

---
 src/assets/images/icons/share.svg    |   4 +-
 src/components/Card/index.tsx        |   4 +-
 src/pages/artist/[artist]/artist.tsx | 145 ++++++++++++++-------------
 3 files changed, 79 insertions(+), 74 deletions(-)

diff --git a/src/assets/images/icons/share.svg b/src/assets/images/icons/share.svg
index db374178..eb81a1a9 100644
--- a/src/assets/images/icons/share.svg
+++ b/src/assets/images/icons/share.svg
@@ -1,6 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="Linear / Arrows Action / Square Bottom Up">
-<path id="Vector" d="M10.8342 18.3327C14.2134 18.3266 15.9829 18.2436 17.1138 17.1128C18.3342 15.8924 18.3342 13.9282 18.3342 9.99984C18.3342 6.07147 18.3342 4.10728 17.1138 2.88689C15.8934 1.6665 13.9292 1.6665 10.0008 1.6665C6.07245 1.6665 4.10826 1.6665 2.88788 2.88689C1.75702 4.01775 1.67405 5.78728 1.66797 9.1665" stroke="#292929" stroke-linecap="round"/>
-<path id="Vector_2" d="M2.5 17.5002L9.16667 10.8335M9.16667 10.8335H4.16667M9.16667 10.8335V15.8335" stroke="#292929" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M10.8342 18.3327C14.2134 18.3266 15.9829 18.2436 17.1138 17.1128C18.3342 15.8924 18.3342 13.9282 18.3342 9.99984C18.3342 6.07147 18.3342 4.10728 17.1138 2.88689C15.8934 1.6665 13.9292 1.6665 10.0008 1.6665C6.07245 1.6665 4.10826 1.6665 2.88788 2.88689C1.75702 4.01775 1.67405 5.78728 1.66797 9.1665" stroke="#1FAB5E" stroke-linecap="round"/>
+<path id="Vector_2" d="M2.5 17.5002L9.16667 10.8335M9.16667 10.8335H4.16667M9.16667 10.8335V15.8335" stroke="#1FAB5E" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 0e5ad9e1..bc2d8694 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -13,7 +13,7 @@ export default function Card({
 }) {
   return (
     <div className={className}>
-      <div className='relative rounded-[20px_20px_0px_0px] text-base leading-6 font-extrabold text-second-color px-5 py-[10px] lg:px-[50px] lg:py-5 lg:text-2xl lg:leading-6 bg-light-gray w-fit drop-shadow-[5px_0px_5px_rgba(0,0,0,0.1)]'>
+      <div className='relative rounded-[20px_20px_0px_0px] text-base leading-6 font-extrabold text-[#414141] px-5 py-[10px] lg:px-[50px] lg:py-5 lg:text-2xl lg:leading-6 bg-light-gray w-fit drop-shadow-[5px_0px_5px_rgba(0,0,0,0.1)]'>
         {title}
         <span className='absolute -right-5 bottom-0'>
           <Image src={Tail} alt='' className='w-5 h-5' />
@@ -34,7 +34,7 @@ export function SubCard({
 }) {
   return (
     <div className={className}>
-      <div className='max-w-[90%] relative rounded-[20px_20px_0px_0px] text-sm leading-6 font-bold text-[#292929] px-5 py-[5px] lg:py-[10px] lg:px-[50px] lg:text-xl lg:leading-6 bg-light-medium-gray w-fit drop-shadow-[5px_0px_5px_rgba(0,0,0,0.1)]'>
+      <div className='max-w-[90%] relative rounded-[20px_20px_0px_0px] text-sm leading-6 font-bold text-second-color px-5 py-[5px] lg:py-[10px] lg:px-[50px] lg:text-xl lg:leading-6 bg-light-medium-gray w-fit drop-shadow-[5px_0px_5px_rgba(0,0,0,0.1)]'>
         {title}
         <span className='absolute -right-5 bottom-0'>
           <Image src={SubTail} alt='' className='w-5 h-5' />
diff --git a/src/pages/artist/[artist]/artist.tsx b/src/pages/artist/[artist]/artist.tsx
index f28a47b3..ab0477b6 100644
--- a/src/pages/artist/[artist]/artist.tsx
+++ b/src/pages/artist/[artist]/artist.tsx
@@ -73,7 +73,7 @@ export default function Artist({ artistDetail }) {
                   <>
                     <div className='text-medium-gray'>
                       <div>{t('DoB')}:</div>
-                      <div className='h-0 invisible'>{t('Total subscribers')}:</div>
+                      <div className='h-0 invisible hidden w-max lg:block'>{t('Total subscribers')}:</div>
                     </div>
                     <div className='font-medium'>
                       {locale == 'vn'
@@ -122,83 +122,88 @@ export default function Artist({ artistDetail }) {
             <div className='flex gap-[15px] text-xs leading-[15px] lg:text-base lg:leading-5 lg:font-medium lg:gap-5'>
               <div className='text-medium-gray'>
                 <div>{t('Bio')}:</div>
-                <div className='h-0 invisible'>{t('Total subscribers')}:</div>
+                <div className='h-0 w-max invisible hidden lg:block'>{t('Total subscribers')}:</div>
+                <div className='h-0 w-max invisible lg:hidden'>{t('Gender')}:</div>
               </div>
               <div className='font-medium line-clamp-3'>{artist?.bio}</div>
             </div>
           </div>
         </div>
-        <div className='mt-10 lg:-mx-[35px]'>
-          <Card title={t('Mangas')}>
-            <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-10'>
-              {artist.comics?.slice(0, 2)?.map((comic, index) => (
-                <Fragment key={index}>
-                  <div className='bg-white p-[10px] rounded-[10px] md:hidden'>
-                    <MobileComic {...comic} />
-                  </div>
-                  <div className='bg-white p-[10px] rounded-[10px] hidden md:block'>
-                    <Comic {...comic} />
-                  </div>
-                </Fragment>
-              ))}
-            </div>
-          </Card>
-        </div>
-        <div className='mt-10 lg:-mx-[35px]'>
-          <Card title={t('NFT Collections')}>
-            <div className='my-[10px] lg:my-0 flex flex-col gap-5 lg:gap-10'>
-              {artist.collections.slice(currentPage * 2 - 2, currentPage * 2).map((collection, index) => (
-                <SubCard
-                  key={index}
-                  title={
-                    <div className='flex gap-[10px]'>
-                      <div className='text-sm leading-6 truncate lg:text-xl lg:leading-6'>{collection.name}</div>
-                      <Link
-                        title={t('View more on Seekhype')}
-                        href={`${getConfig().SEEKHYPE_URL}/collection/${collection.address}`}
-                        className='cursor-pointer'>
-                        <Image src={ShareIcon} alt='' className='w-5 h-5' />
-                      </Link>
+        {!!artist.comics.length && (
+          <div className='mt-10 lg:-mx-[35px]'>
+            <Card title={t('Mangas')}>
+              <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 lg:gap-10'>
+                {artist.comics?.slice(0, 2)?.map((comic, index) => (
+                  <Fragment key={index}>
+                    <div className='bg-white p-[10px] rounded-[10px] md:hidden'>
+                      <MobileComic {...comic} />
                     </div>
-                  }>
-                  <div className='grid grid-cols-[repeat(auto-fill,minmax(max(160px,calc(100%/5)),1fr))] grid-rows-[auto_auto] lg:grid-rows-1 auto-rows-[0px] overflow-hidden -m-[5px] lg:-m-5'>
-                    {collection.tokens.map((token, index) => (
-                      <Link
-                        href={`${getConfig().SEEKHYPE_URL}/nft/${collection.address}/${token.id}`}
-                        key={index}
-                        className='p-[5px] lg:p-5 [&:hover_.view-on-seekhype]:translate-y-0'>
-                        <div className='bg-white rounded-[20px] p-[10px]'>
-                          <div className='w-full aspect-square rounded-[15px] overflow-hidden relative'>
-                            <Image
-                              src={token.image}
-                              width={160}
-                              height={160}
-                              className='w-full object-cover aspect-square'
-                              alt=''
-                            />
-                            <div className='view-on-seekhype transition-all translate-y-full absolute bottom-0 bg-primary-color py-2 w-full text-xl leading-[25px] font-bold text-center'>
-                              {t('View on SEEKHYPE')}
+                    <div className='bg-white p-[10px] rounded-[10px] hidden md:block'>
+                      <Comic {...comic} />
+                    </div>
+                  </Fragment>
+                ))}
+              </div>
+            </Card>
+          </div>
+        )}
+        {!!artist.collections.length && (
+          <div className='mt-10 lg:-mx-[35px]'>
+            <Card title={t('NFT Collections')}>
+              <div className='my-[10px] lg:my-0 flex flex-col gap-5 lg:gap-10'>
+                {artist.collections.slice(currentPage * 2 - 2, currentPage * 2).map((collection, index) => (
+                  <SubCard
+                    key={index}
+                    title={
+                      <div className='flex gap-[10px]'>
+                        <div className='text-sm leading-6 truncate lg:text-xl lg:leading-6'>{collection.name}</div>
+                        <Link
+                          title={t('View more on Seekhype')}
+                          href={`${getConfig().SEEKHYPE_URL}/collection/${collection.address}`}
+                          className='cursor-pointer'>
+                          <Image src={ShareIcon} alt='' className='w-5 h-5' />
+                        </Link>
+                      </div>
+                    }>
+                    <div className='grid grid-cols-[repeat(auto-fill,minmax(max(160px,calc(100%/5)),1fr))] grid-rows-[auto_auto] lg:grid-rows-1 auto-rows-[0px] overflow-hidden -m-[5px] lg:-m-5'>
+                      {collection.tokens.map((token, index) => (
+                        <Link
+                          href={`${getConfig().SEEKHYPE_URL}/nft/${collection.address}/${token.id}`}
+                          key={index}
+                          className='p-[5px] lg:p-5 [&:hover_.view-on-seekhype]:translate-y-0'>
+                          <div className='bg-white rounded-[20px] p-[10px]'>
+                            <div className='w-full aspect-square rounded-[15px] overflow-hidden relative'>
+                              <Image
+                                src={token.image}
+                                width={160}
+                                height={160}
+                                className='w-full object-cover aspect-square'
+                                alt=''
+                              />
+                              <div className='view-on-seekhype transition-all translate-y-full absolute bottom-0 bg-primary-color py-2 w-full text-xl leading-[25px] font-bold text-center'>
+                                {t('View on SEEKHYPE')}
+                              </div>
+                            </div>
+                            <div className='mt-[10px] text-subtle-dark text-sm font-bold leading-[18px] text-center truncate lg:text-xl lg:leading-[25px]'>
+                              {token.name}
                             </div>
                           </div>
-                          <div className='mt-[10px] text-subtle-dark text-sm font-bold leading-[18px] text-center truncate lg:text-xl lg:leading-[25px]'>
-                            {token.name}
-                          </div>
-                        </div>
-                      </Link>
-                    ))}
-                  </div>
-                </SubCard>
-              ))}
-              {!!artist.collections.length && (
-                <Pagination
-                  length={Math.ceil(artist.collections.length / 2)}
-                  currentPage={currentPage}
-                  setCurrentPage={setCurrentPage}
-                />
-              )}
-            </div>
-          </Card>
-        </div>
+                        </Link>
+                      ))}
+                    </div>
+                  </SubCard>
+                ))}
+                {!!artist.collections.length && (
+                  <Pagination
+                    length={Math.ceil(artist.collections.length / 2)}
+                    currentPage={currentPage}
+                    setCurrentPage={setCurrentPage}
+                  />
+                )}
+              </div>
+            </Card>
+          </div>
+        )}
       </div>
     </>
   )