Skip to content

Commit

Permalink
update pc
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Aug 8, 2024
1 parent d0de9ab commit ea688ed
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 35 deletions.
30 changes: 16 additions & 14 deletions src/components/pages/artist/Artworks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/artist/Collections.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)}
Expand Down
31 changes: 22 additions & 9 deletions src/components/pages/artist/Contests.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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}
Expand All @@ -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) => (
Expand All @@ -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>
))}
Expand All @@ -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}
Expand Down Expand Up @@ -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)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/artist/Mangas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand All @@ -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>
Expand Down
74 changes: 66 additions & 8 deletions src/pages/artist/[artist]/artist.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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}
Expand Down Expand Up @@ -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 ${
Expand All @@ -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'>
Expand All @@ -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>
Expand Down

0 comments on commit ea688ed

Please sign in to comment.