update

aura-nw · Sep 11, 2023 · 8af4c3f · 8af4c3f
1 parent fb8ddc0
commit 8af4c3f
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 26 deletions.
diff --git a/src/assets/images/subtab_tail_dark.svg b/src/assets/images/subtab_tail_dark.svg
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 import Tail from 'images/tab_tail.svg'
 import SubTail from 'images/subtab_tail.svg'
+import SubTailDark from 'images/subtab_tail_dark.svg'
 import Image from 'next/image'
 export default function Card({
   title,
@@ -27,11 +28,30 @@ export function SubCard({
   title,
   children,
   className,
+  theme,
 }: {
   className?: string
+  theme?: string
   title: string | ReactNode
   children: ReactNode
 }) {
+  if (theme == 'dark') {
+    return (
+      <div className={className}>
+        <div className='max-w-[90%] relative rounded-[20px_20px_0px_0px] text-sm leading-6 font-bold text-primary-color px-5 py-[5px] lg:py-[10px] lg:px-[50px] lg:text-xl lg:leading-6 bg-[#292929] w-fit drop-shadow-[5px_0px_5px_rgba(0,0,0,0.1)]'>
+          {title}
+          <span className='absolute -right-5 bottom-0'>
+            <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'>
+              <path d='M0 0V20H20C8.95431 20 0 11.0457 0 0Z' fill='#292929' />
+            </svg>
+          </span>
+        </div>
+        <div className='bg-[#292929] p-[10px] rounded-[0px_20px_20px_20px] z-10 relative lg:py-5 lg:px-10'>
+          {children}
+        </div>
+      </div>
+    )
+  }
   return (
     <div className={className}>
       <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)]'>

diff --git a/src/components/pages/chapter/comicDetail.tsx b/src/components/pages/chapter/comicDetail.tsx
@@ -20,6 +20,7 @@ import { Tab } from '@headlessui/react'
 import Ninja from 'images/ninja-2.svg'
 import Link from 'next/link'
 import { CHAPTER_STATUS } from 'src/constants/chapter.constant'
+import NFTList from './nftList'
 
 export default function ComicDetail({
   data,
@@ -298,10 +299,14 @@ export default function ComicDetail({
                 />
               </Tab.Panel>
               <Tab.Panel className='flex-1 flex flex-col'>
-                <div className='flex-1 w-full flex flex-col items-center justify-center mt-[136px]'>
-                  <Image src={Ninja} alt='' className='h-[260px] aspect-square mx-auto' />
-                  <div className='font-extrabold text-2xl leading-6 mt-[10px]'>Artist Composing</div>
-                </div>
+                {!!data.collections.length ? (
+                  <NFTList theme={undefined} collections={data.collections} />
+                ) : (
+                  <div className='flex-1 w-full flex flex-col items-center justify-center mt-[136px]'>
+                    <Image src={Ninja} alt='' className='h-[260px] aspect-square mx-auto' />
+                    <div className='font-extrabold text-2xl leading-6 mt-[10px]'>Artist Composing</div>
+                  </div>
+                )}
               </Tab.Panel>
             </Tab.Panels>
           </Tab.Group>

diff --git a/src/components/pages/chapter/nftList.tsx b/src/components/pages/chapter/nftList.tsx
@@ -6,15 +6,15 @@ import { useTranslation } from 'react-i18next'
 import { SubCard } from 'components/Card'
 import ShareIcon from 'images/icons/share.svg'
 
-export default function NFTList({ collections }) {
+export default function NFTList({ collections, theme }) {
   const { t } = useTranslation()
   const seekhypeBaseUrl = new URL(getConfig().SEEKHYPE_URL).origin
-  console.log(collections)
   return (
-    <>
+    <div className='p-5 flex flex-col gap-5 bg-black lg:py-10 lg:px-0 lg:bg-transparent lg:w-[calc(100%-140px)] lg:gap-10'>
       {collections?.map((collection, index) => (
         <SubCard
           key={index}
+          theme={theme}
           title={
             <div className='flex gap-[10px]'>
               <div className='text-sm leading-6 truncate lg:text-xl lg:leading-6'>{collection.name}</div>
@@ -23,7 +23,23 @@ export default function NFTList({ collections }) {
                 title={t('View more on SEEKHYPE')}
                 href={`${seekhypeBaseUrl}/collection/${collection.address}`}
                 className='cursor-pointer'>
-                <Image src={ShareIcon} alt='' className='w-5 h-5' />
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  width='20'
+                  height='20'
+                  viewBox='0 0 20 20'
+                  fill='none'
+                  className={theme == 'dark' ? `[&_path]:stroke-primary-color` : `[&_path]:stroke-second-color`}>
+                  <path
+                    d='M10.8342 18.3328C14.2134 18.3267 15.9829 18.2438 17.1138 17.1129C18.3342 15.8925 18.3342 13.9283 18.3342 9.99996C18.3342 6.07159 18.3342 4.1074 17.1138 2.88701C15.8934 1.66663 13.9292 1.66663 10.0008 1.66663C6.07245 1.66663 4.10826 1.66663 2.88788 2.88701C1.75702 4.01787 1.67405 5.7874 1.66797 9.16663'
+                    strokeLinecap='round'
+                  />
+                  <path
+                    d='M2.5 17.5L9.16667 10.8334M9.16667 10.8334H4.16667M9.16667 10.8334V15.8334'
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                  />
+                </svg>
               </Link>
             </div>
           }>
@@ -34,7 +50,7 @@ export default function NFTList({ collections }) {
                 href={`${seekhypeBaseUrl}/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={`${theme == 'dark' ? 'bg-[#414141]' : 'bg-white'} rounded-[20px] p-[10px]`}>
                   <div className='w-full aspect-square rounded-[15px] overflow-hidden relative'>
                     <Image
                       src={token.image || NoImage}
@@ -47,7 +63,10 @@ export default function NFTList({ collections }) {
                       {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]'>
+                  <div
+                    className={`mt-[10px] ${
+                      theme == 'dark' ? 'text-white' : 'text-subtle-dark'
+                    } text-sm font-bold leading-[18px] text-center truncate lg:text-xl lg:leading-[25px]`}>
                     {token.name}
                   </div>
                 </div>
@@ -56,6 +75,6 @@ export default function NFTList({ collections }) {
           </div>
         </SubCard>
       ))}
-    </>
+    </div>
   )
 }
diff --git a/src/components/pages/homepage/comic.tsx b/src/components/pages/homepage/comic.tsx
@@ -16,29 +16,25 @@ export default function Comic(props: IComic) {
   return (
     <div className={`${props.status.text == 'Upcoming' ? '[&_a:not(.author)]:pointer-events-none' : ''}`}>
       <div className='hidden md:flex gap-[20px]'>
-        <Link href={`/comic/${props.id}`} className='flex-auto w-1/3 xl:hidden'>
+        <Link href={`/comic/${props.id}`} className=' xl:hidden shrink-0 block w-[180px] aspect-[180/240] mx-auto'>
           <Image
             src={props.image || NoImage}
             alt=''
             width={180}
             height={240}
-            className={`${
-              props.image ? 'object-cover' : 'object-contain bg-light-gray'
-            } rounded-[15px] w-[180px] aspect-[180/240] mx-auto`}
+            className={`w-full h-full ${props.image ? 'object-cover' : 'object-contain bg-light-gray'} rounded-[15px] `}
           />
         </Link>
-        <Link href={`/comic/${props.id}/chapter/1`} className='flex-auto w-1/3 hidden xl:block'>
+        <Link href={`/comic/${props.id}/chapter/1`} className='shrink-0 w-[180px] aspect-[180/240] hidden xl:block'>
           <Image
             src={props.image || NoImage}
             alt=''
             width={180}
             height={240}
-            className={`${
-              props.image ? 'object-cover' : 'object-contain bg-light-gray'
-            } rounded-[15px] w-[180px] aspect-[180/240]`}
+            className={`w-full h-full ${props.image ? 'object-cover' : 'object-contain bg-light-gray'} rounded-[15px] `}
           />
         </Link>
-        <div className='flex-auto w-2/3 flex flex-col justify-between gap-[10px]'>
+        <div className='flex-auto w-[calc(100%-200px)] flex flex-col justify-between gap-[10px]'>
           <div className='flex flex-col gap-[10px]'>
             <div>
               <div className='flex justify-between xl:hidden items-start flex-nowrap'>
@@ -88,7 +84,7 @@ export default function Comic(props: IComic) {
                 <strong>{props.likes.toLocaleString('en-US')}</strong> {props.likes > 1 ? t('likes') : t('like')}
               </div>
             </div>
-            <div className=' text-[16px] leading-[20px] line-clamp-3'>{props[locale].description}</div>
+            <div className=' text-[16px] leading-[20px] line-clamp-3 break-words'>{props[locale].description}</div>
           </div>
           {!!props.latestChap.number && (
             <div className='leading-[20px]'>

diff --git a/src/components/pages/homepage/trendingComic.tsx b/src/components/pages/homepage/trendingComic.tsx
@@ -42,7 +42,7 @@ export default function TrendingComic(props: IComic) {
           }`}
         />
       </Link>
-      <div className='flex-1 flex flex-col gap-[10px]'>
+      <div className='flex-auto w-[calc(100%-170px)] flex flex-col gap-[10px]'>
         <div>
           <Link
             href={`/comic/${props.id}`}

diff --git a/src/models/comic.ts b/src/models/comic.ts
@@ -39,6 +39,7 @@ interface Detail {
     }
   >
   chapters: IChapter[]
+  collections: any[]
   isSubscribe?: boolean
 }
 

diff --git a/src/pages/artist/[artist]/artist.tsx b/src/pages/artist/[artist]/artist.tsx
@@ -32,7 +32,7 @@ export default function Artist({ artistDetail }) {
   if (!artist) return <></>
   return (
     <>
-      <HeadComponent title={`Sunday | Punkga.me`} />
+      <HeadComponent title={`${artist.name} | Punkga.me`} />
       <Header />
       <div className='px-[10px] lg:px-0 lg:py-[47px] py-[17px] pk-container'>
         <div className='flex gap-[10px] lg:gap-[60px] px-[10px] lg:px-0'>

diff --git a/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx b/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx
@@ -99,6 +99,14 @@ const Chapter: React.FC = ({
     return () => clearInterval(commentIntervalId.current)
   }, [openComments])
 
+  useEffect(() => {
+    window.addEventListener('keydown', (e) => {
+      if (e.which == 27) {
+        setMode('minscreen')
+      }
+    })
+  }, [])
+
   useEffect(() => {
     if (comicDetails?.data?.id && account) {
       const currentReading = getItem('current_reading_manga')

diff --git a/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx b/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx
@@ -44,7 +44,10 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
       isLiked: !!data.chapters_likes.length,
     }
 
-    if (data.chapter_type == CHAPTER_TYPE.ACCOUNT_ONLY || data.chapter_type == CHAPTER_TYPE.NFTS_ONLY) {
+    if (
+      (data.chapter_type == CHAPTER_TYPE.ACCOUNT_ONLY || data.chapter_type == CHAPTER_TYPE.NFTS_ONLY) &&
+      account?.id
+    ) {
       const { data: protectedData } = await privateAxios.get(`${config.REST_API_URL}/chapter/${data.id}/protected`)
       LANGUAGE.forEach((l) => {
         const chapterLanguage = protectedData.data.chapters[0].chapter_languages.find((cl) => cl.language_id == l.id)

diff --git a/src/pages/comic/[comicId]/comic.tsx b/src/pages/comic/[comicId]/comic.tsx
@@ -173,7 +173,7 @@ export default function Comic({ comicDetails, subscribe, unsubscribe, like, unli
               </Tab.Panel>
               <Tab.Panel className='flex-1 flex flex-col'>
                 {!!comicDetails.data.collections.length ? (
-                  <NFTList collections={comicDetails.data.collections} />
+                  <NFTList theme='dark' collections={comicDetails.data.collections} />
                 ) : (
                   <div className='flex-1 w-full bg-[#292929]/80 flex flex-col items-center justify-center'>
                     <Image src={Ninja} alt='' className='h-[260px] aspect-square mx-auto opacity-60' />

diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
@@ -23,7 +23,7 @@ export default function Search() {
         <p className='md:text-2xl font-extrabold leading-6 mt-2 md:mt-10'>{`${searchComic.data?.length} ${t(
           'results for'
         )} "${keyword}"`}</p>
-        <div className='mt-2 md:mt-10 grid grid-cols-2 gap-10'>
+        <div className='mt-2 md:mt-10 grid grid-cols-2 lg:grid-cols-3 gap-10 lg:gap-y-20'>
           {searchComic.loading
             ? Array.apply(null, Array(6)).map((d, index) => {
                 return <DummyComic key={index} />