Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Sep 11, 2024
1 parent 04acb03 commit 0ca6a85
Show file tree
Hide file tree
Showing 6 changed files with 121 additions and 129 deletions.
126 changes: 66 additions & 60 deletions src/components/pages/chapter/readingSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,33 +162,34 @@ export default function ReadingSection({
}

if (!data || !chapterData) {
return <>{chapterData.type == CHAPTER_TYPE.NFTS_ONLY ? (
<div className='flex flex-col gap-3 items-center'>
<Image src={Ninja3} alt='' width={256} height={256} />
<div className='text-center font-bold text-md'>
{t('This chapter requires NFT to read')}
</div>
<div>
<OutlineButton
size='md'
className='w-full'>
{t('Get NFT')}
</OutlineButton>
</div>
</div>

) :
(<div>
{t('No data to show')}
</div>)
}</>
return (
<>
{chapterData.type == CHAPTER_TYPE.NFTS_ONLY ? (
<div className='flex flex-col gap-3 items-center'>
<Image src={Ninja3} alt='' width={256} height={256} />
<div className='text-center font-bold text-md'>{t('This chapter requires NFT to read')}</div>
<div>
<OutlineButton
size='md'
className='w-full'
onClick={() => router.push(`/collections/${chapterData.collectionSlug}`)}>
{t('Get NFT')}
</OutlineButton>
</div>
</div>
) : (
<div>{t('No data to show')}</div>
)}
</>
)
}
const currentChapIndex = data.chapters.findIndex((chap) => chap.id == chapterData.id)
chapterLengthRef.current = chapterData[chapterLocale]?.length
return (
<div
className={`w-full h-full overflow-hidden ${mode == 'minscreen' ? 'relative' : 'fixed bg-black z-20 top-0 bottom-0'
}`}>
className={`w-full h-full overflow-hidden ${
mode == 'minscreen' ? 'relative' : 'fixed bg-black z-20 top-0 bottom-0'
}`}>
{!account && chapterData.type == CHAPTER_TYPE.ACCOUNT_ONLY ? (
<div className='h-full w-full flex justify-center items-center'>
<div>
Expand All @@ -207,16 +208,17 @@ export default function ReadingSection({
<div className='h-[calc(100%-60px)] overflow-auto'>
<div
ref={ref}
className={`${mode == 'minscreen' ? '' : ''} ${readingMode == 'onePage' ? 'w-[90%] max-w-[940px] mx-auto' : 'flex h-full items-center justify-center'
}`}>
className={`${mode == 'minscreen' ? '' : ''} ${
readingMode == 'onePage' ? 'w-[90%] max-w-[940px] mx-auto' : 'flex h-full items-center justify-center'
}`}>
{chapterData[chapterLocale]
?.slice(
readingMode == 'onePage' ? 0 : currentPage,
readingMode == 'onePage'
? chapterLengthRef.current
: currentPage + 2 > chapterLengthRef.current
? chapterLengthRef.current
: currentPage + 4
? chapterLengthRef.current
: currentPage + 4
)
?.map((page, index) =>
window.innerWidth < 1280 ? null : (
Expand All @@ -225,10 +227,11 @@ export default function ReadingSection({
key={index}
id={`page_${index}`}
alt=''
className={`${readingMode == 'onePage'
? 'mx-auto'
: `h-full w-1/2 [&>img]:!w-fit ${index % 2 == 0 ? '[&>img]:ml-auto' : '[&>img]:mr-auto'}`
} ${readingMode != 'onePage' && index > 1 && 'hidden'}`}
className={`${
readingMode == 'onePage'
? 'mx-auto'
: `h-full w-1/2 [&>img]:!w-fit ${index % 2 == 0 ? '[&>img]:ml-auto' : '[&>img]:mr-auto'}`
} ${readingMode != 'onePage' && index > 1 && 'hidden'}`}
width={1900}
height={1000}
priority={index < 4}
Expand All @@ -243,30 +246,26 @@ export default function ReadingSection({
{chapterData.type == CHAPTER_TYPE.NFTS_ONLY ? (
<div className='flex flex-col gap-3 items-center'>
<Image src={Ninja3} alt='' width={256} height={256} />
<div className='text-center font-bold text-md'>
{t('This chapter requires NFT to read')}
</div>
<div className='text-center font-bold text-md'>{t('This chapter requires NFT to read')}</div>
<div>
<OutlineButton
size='md'
className='w-full'>
className='w-full'
onClick={() => router.push(`/collections/${chapterData.collectionSlug}`)}>
{t('Get NFT')}
</OutlineButton>
</div>
</div>

) :
(<div>
{t('No data to show')}
</div>)
}
) : (
<div>{t('No data to show')}</div>
)}
</div>
</div>
)
}
)}
<div
className={`peer bg-[#F0F0F0] absolute bottom-0 right-0 left-0 w-full flex items-center px-[40px] py-[6px] ${mode == 'minscreen' ? 'visible' : 'invisible -z-10'
}`}>
className={`peer bg-[#F0F0F0] absolute bottom-0 right-0 left-0 w-full flex items-center px-[40px] py-[6px] ${
mode == 'minscreen' ? 'visible' : 'invisible -z-10'
}`}>
<div className='flex-auto w-1/3 self-center'>
<div className='text-ellipsis max-w-[90%] overflow-hidden whitespace-nowrap'>
<div className='font-bold truncate'>{`${t('Chapter')} ${chapterData.number} • ${chapterData.name}`}</div>
Expand Down Expand Up @@ -347,8 +346,9 @@ export default function ReadingSection({
</div>
</div>
<div
className={`peer bg-[#F0F0F0] absolute bottom-0 right-0 left-0 w-full flex items-center px-[40px] py-[6px] duration-300 transition-opacity ${mode != 'minscreen' ? 'visible' : 'invisible -z-10'
} opacity-100`}>
className={`peer bg-[#F0F0F0] absolute bottom-0 right-0 left-0 w-full flex items-center px-[40px] py-[6px] duration-300 transition-opacity ${
mode != 'minscreen' ? 'visible' : 'invisible -z-10'
} opacity-100`}>
<div className='flex-auto w-1/3 self-center'>
<div className='text-ellipsis max-w-[90%] overflow-hidden whitespace-nowrap'>
<strong className='font-bold'>{`${t('Chapter')} ${chapterData.number} • ${chapterData.name}`}</strong>
Expand Down Expand Up @@ -377,45 +377,51 @@ export default function ReadingSection({
)}

<Image
className={`cursor-pointer ${currentChapIndex == data.chapters.length - 1 ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''
}`}
className={`cursor-pointer ${
currentChapIndex == data.chapters.length - 1 ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''
}`}
onClick={() => goToChap('Prev')}
src={SquareArrowLeftIcon}
alt=''
/>
<div className='relative px-[10px] py-[4px] rounded-xl border-second-color border-[1.5px] flex gap-[10px] items-center justify-between cursor-pointer w-[200px]'>
<span
onClick={() => setShowChapterList(!showChapterList)}
className='text-second-color w-full text-sm leading-5 whitespace-nowrap'>{`${t('Chapter')} ${chapterData.number}`}</span>
className='text-second-color w-full text-sm leading-5 whitespace-nowrap'>{`${t('Chapter')} ${
chapterData.number
}`}</span>
<ChevronUpIcon
onClick={() => setShowChapterList(!showChapterList)}
className={`h-6 w-6 text-second-color transition-all ${showChapterList ? 'rotate-180' : 'rotate-0'}`}
/>
<div
className={`absolute bg-light-gray bottom-[120%] left-0 px-[10px] py-[6px] border-[1.5px] border-second-color rounded-xl w-full flex gap-[10px] flex-col-reverse transition-all ${showChapterList
? 'max-h-[135px] overflow-auto opacity-100'
: 'max-h-[0px] overflow-hidden opacity-0 pointer-events-none'
}`}>
className={`absolute bg-light-gray bottom-[120%] left-0 px-[10px] py-[6px] border-[1.5px] border-second-color rounded-xl w-full flex gap-[10px] flex-col-reverse transition-all ${
showChapterList
? 'max-h-[135px] overflow-auto opacity-100'
: 'max-h-[0px] overflow-hidden opacity-0 pointer-events-none'
}`}>
{data?.chapters
?.filter((chapter) => chapter.status == 'Published')
?.map((chapter, index) => {
return (
<div
onClick={() => router.push(`/comic/${data.slug}/chapter/${chapter?.number}`)}
key={index}
className={`cursor-pointer text-xs hover:bg-light-medium-gray ${currentChapIndex == index ? 'text-second-color' : ''
}`}>
className={`cursor-pointer text-xs hover:bg-light-medium-gray ${
currentChapIndex == index ? 'text-second-color' : ''
}`}>
{t('Chapter')} {chapter.number}
</div>
)
})}
</div>
</div>
<Image
className={`cursor-pointer ${currentChapIndex == 0 || data.chapters?.[currentChapIndex - 1]?.status == CHAPTER_STATUS.UPCOMING
? 'opacity-60 cursor-not-allowed pointer-events-none'
: ''
}`}
className={`cursor-pointer ${
currentChapIndex == 0 || data.chapters?.[currentChapIndex - 1]?.status == CHAPTER_STATUS.UPCOMING
? 'opacity-60 cursor-not-allowed pointer-events-none'
: ''
}`}
onClick={() => goToChap('Next')}
src={SquareArrowRightIcon}
alt=''
Expand Down Expand Up @@ -470,6 +476,6 @@ export default function ReadingSection({
</div>
<div className={`flex-auto w-1/3 self-center flex gap-2 justify-end`}></div>
</div>
</div >
</div>
)
}
58 changes: 35 additions & 23 deletions src/components/pages/comic/NFTsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,37 @@ import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
import 'swiper/css/effect-coverflow'
import 'swiper/css/pagination'
import { useState } from 'react'
import Select from 'components/Select'
import { useRouter } from 'next/router'
import Link from 'next/link'

export default function NFTsList({ collections }: { collections: any[] }) {
console.log(collections)
const { locale } = useRouter()
const [selected, setSelected] = useState({
key: collections[0].slug,
value: collections[0].name[locale],
})
return (
<div className='w-full px-6 container relative'>
<div className='flex justify-between items-center'></div>
<div className='w-full px-5 container relative'>
<div className='flex justify-between items-center pt-3'>
<div>
<Select
options={collections.map((collection) => ({
key: collection.slug,
value: collection.name[locale],
}))}
selected={selected}
onChange={setSelected}
/>
</div>
<Link
href={`/collections/${selected.key}`}
className='font-bold rounded-[20px] grid place-items-center h-10 px-6 border-[2px] border-second-color text-second-color'>
View detail
</Link>
</div>
<div className='swiper_container h-auto pt-10 pb-8 px-6 relative z-5'>
<Swiper
effect={'coverflow'}
Expand All @@ -34,27 +60,13 @@ export default function NFTsList({ collections }: { collections: any[] }) {
}}
modules={[EffectCoverflow, Pagination, Navigation]}
className='z-10 relative'>
<SwiperSlide className='max-w-[200px]'>
<Image src={Howater} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
<SwiperSlide className='max-w-[200px]'>
<Image src={Howater} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
<SwiperSlide className='max-w-[200px]'>
<Image src={Howater} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
<SwiperSlide className='max-w-[200px]'>
<Image src={Howater} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
<SwiperSlide className='max-w-[200px]'>
<Image src={Howater} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
<SwiperSlide className='max-w-[200px]'>
<Image src={Howater} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
<SwiperSlide className='max-w-[200px]'>
<Image src={Howater} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
{collections
.find((c) => selected.key == c.slug)
.images.map((image, index) => (
<SwiperSlide className='max-w-[200px]' key={index}>
<Image src={image} alt='' width={200} height={200} className='rounded-2xl object-cover' />
</SwiperSlide>
))}
</Swiper>

<div className='slider-controler z-20 absolute top-full left-1/2 transform -translate-x-1/2 flex items-center justify-center gap-7 '>
Expand Down
1 change: 1 addition & 0 deletions src/models/chapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@ export interface IChapter {
comments: number
isLiked: boolean
date: Date
collectionSlug?:string
}
1 change: 1 addition & 0 deletions src/pages/comic/[comicSlug]/chapter/[chapterNumber]/with-api.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
name: data.chapter_name,
number: data.chapter_number,
isLiked: !!data.chapters_likes.length,
collectionSlug: data.chapter_collections?.[0]?.chapter_collection?.slug,
}

if (
Expand Down
10 changes: 5 additions & 5 deletions src/pages/comic/[comicSlug]/comic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { HEADER_HEIGHT } from 'components/Header';
import Tag from 'components/Label/Tag';
import ChapterList from 'components/pages/comic/ChapterList';
import Introduction from 'components/pages/comic/Introduction';
import NFTsList from 'components/pages/comic/NFTsList';
import Ninja from 'images/ninja-2.svg';
import Image from 'next/image';
import Link from 'next/link';
Expand Down Expand Up @@ -192,19 +193,18 @@ function Comic({ comicDetails, like, unlike }) {
/>
</Tab.Panel>
<Tab.Panel className='h-full flex-1 flex flex-col'>
{/* {!!comicDetails.data.collections.length ? (
<NFTList
theme="dark"
{!!comicDetails.data.collections.length ? (
<NFTsList
collections={comicDetails.data.collections}
/>
) : ( */}
) : (
<div className='flex-1 w-full flex flex-col items-center justify-center'>
<Image src={Ninja} alt='' className='h-[260px] aspect-square mx-auto opacity-60' />
<div className='font-extrabold text-2xl leading-6 text-subtle-dark mt-[10px]'>
{t('Artist Composing')}
</div>
</div>
{/* )} */}
)}
</Tab.Panel>
<Tab.Panel className='h-full flex-1 flex flex-col'>
<div className='flex-1 w-full flex'>
Expand Down
Loading

0 comments on commit 0ca6a85

Please sign in to comment.