Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Sep 5, 2023
1 parent ed10a21 commit 237208e
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 74 deletions.
4 changes: 2 additions & 2 deletions src/assets/images/icons/share.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/components/Card/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' />
Expand All @@ -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' />
Expand Down
145 changes: 75 additions & 70 deletions src/pages/artist/[artist]/artist.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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>
</>
)
Expand Down

0 comments on commit 237208e

Please sign in to comment.