mirror of
https://github.com/koreanbots/core.git
synced 2025-12-15 14:10:22 +00:00
chore: improved nsfw page
This commit is contained in:
wonderlandpark
parent
7d1262055b
commit
ed18292a46
@ -3,15 +3,23 @@ import dynamic from 'next/dynamic'
|
||||
const Button = dynamic(() => import('@components/Button'))
|
||||
const Container = dynamic(() => import('@components/Container'))
|
||||
|
||||
const NSFW = ({ onClick }:NSFWProps): JSX.Element => {
|
||||
const NSFW = ({ onClick, onDisableClick }:NSFWProps): JSX.Element => {
|
||||
return <Container>
|
||||
<div className='flex items-center h-screen select-none'>
|
||||
<div className='px-10'>
|
||||
<h1 className='text-2xl font-bold'>해당 컨텐츠는 만19세 이상의 성인만 열람할 수 있습니다.</h1>
|
||||
<h1 className='text-2xl font-bold flex'>
|
||||
<img draggable='false' alt='⚠' src='https://twemoji.maxcdn.com/v/13.0.2/svg/26a0.svg' className='emoji mr-2 w-8' />
|
||||
해당 컨텐츠는 만19세 이상의 성인만 열람할 수 있습니다.</h1>
|
||||
<p className='text-lg mb-3'>계속하시겠습니까?</p>
|
||||
<Button onClick={onClick}>
|
||||
<i className='fas fa-arrow-right' /> 계속하기
|
||||
</Button>
|
||||
<div className='mt-1'>
|
||||
<button className='text-blue-500 hover:text-blue-600' onClick={() => {
|
||||
onClick()
|
||||
onDisableClick()
|
||||
}}>다시 표시하지 않기.</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@ -19,6 +27,7 @@ const NSFW = ({ onClick }:NSFWProps): JSX.Element => {
|
||||
|
||||
interface NSFWProps {
|
||||
onClick(): void
|
||||
onDisableClick(): void
|
||||
}
|
||||
|
||||
export default NSFW
|
||||
@ -65,241 +65,239 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken }) => {
|
||||
<h2 className='text-lg font-black'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
|
||||
</Message>
|
||||
</div>
|
||||
: data.category.includes('NSFW') && !nsfw ? <NSFW onClick={() => {
|
||||
localStorage.nsfw = true
|
||||
setNSFW(true)
|
||||
}} /> : <>
|
||||
<div className='w-full pb-2'>
|
||||
{
|
||||
data.state === 'private' ? <Message type='info'>
|
||||
<h2 className='text-lg font-black'>해당 봇은 특수목적 봇이므로 초대하실 수 없습니다.</h2>
|
||||
<p>해당 봇은 공개 사용이 목적이 아닌 특수목적봇입니다. 따라서 따로 초대하실 수 없습니다.</p>
|
||||
</Message> :
|
||||
data.state === 'reported' ?
|
||||
<Message type='error'>
|
||||
<h2 className='text-lg font-black'>해당 봇은 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
|
||||
<p>해당 봇 사용에 주의해주세요.</p>
|
||||
<p>봇 소유자분은 <Link href='/guidelines'><a className='text-blue-500 hover:text-blue-400'>가이드라인</a></Link>에 대한 위반사항을 확인해주시고 <Link href='/discord'><a className='text-blue-500 hover:text-blue-400'>디스코드 서버</a></Link>로 문의해주세요.</p>
|
||||
</Message> : ''
|
||||
}
|
||||
</div>
|
||||
<div className='lg:flex w-full'>
|
||||
<div className='w-full text-center lg:w-1/4'>
|
||||
<DiscordAvatar
|
||||
userID={data.id}
|
||||
className='w-full'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
|
||||
<Tag
|
||||
circular
|
||||
text={
|
||||
<>
|
||||
<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '}
|
||||
{Status[data.status]?.text}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>
|
||||
{data.name}{' '}
|
||||
{checkBotFlag(data.flags, 'trusted') ? (
|
||||
<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
|
||||
<span className='text-koreanbots-blue text-3xl'>
|
||||
<i className='fas fa-award' />
|
||||
</span>
|
||||
</Tooltip>
|
||||
) : ''}
|
||||
</h1>
|
||||
<p className={`${bg ? 'text-gray-300' : 'dark:text-gray-300 text-gray-800'} text-base`}>{data.intro}</p>
|
||||
</div>
|
||||
<div className='w-full lg:w-1/4'>
|
||||
: data.category.includes('NSFW') && !nsfw ? <NSFW onClick={() => setNSFW(true)} onDisableClick={() => localStorage.nsfw = true} />
|
||||
: <>
|
||||
<div className='w-full pb-2'>
|
||||
{
|
||||
data.state === 'ok' && <LongButton
|
||||
newTab
|
||||
href={
|
||||
data.url ||
|
||||
`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
|
||||
}
|
||||
>
|
||||
<h4 className='whitespace-nowrap'>
|
||||
<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
|
||||
</h4>
|
||||
</LongButton>
|
||||
}
|
||||
<Link href={{ pathname: `/bots/${router.query.id}/vote` }}>
|
||||
<LongButton>
|
||||
<h4>
|
||||
<i className='fas fa-heart text-red-600' /> 하트 추가
|
||||
</h4>
|
||||
<span className='ml-1 px-2 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'>
|
||||
{formatNumber(data.votes)}
|
||||
</span>
|
||||
</LongButton>
|
||||
</Link>
|
||||
{
|
||||
((data.owners as User[]).find(el => el.id === user?.id) || checkUserFlag(user?.flags, 'staff')) && <LongButton href={`/manage/${data.id}`}>
|
||||
<h4>
|
||||
<i className='fas fa-cogs' /> 관리하기
|
||||
</h4>
|
||||
</LongButton>
|
||||
data.state === 'private' ? <Message type='info'>
|
||||
<h2 className='text-lg font-black'>해당 봇은 특수목적 봇이므로 초대하실 수 없습니다.</h2>
|
||||
<p>해당 봇은 공개 사용이 목적이 아닌 특수목적봇입니다. 따라서 따로 초대하실 수 없습니다.</p>
|
||||
</Message> :
|
||||
data.state === 'reported' ?
|
||||
<Message type='error'>
|
||||
<h2 className='text-lg font-black'>해당 봇은 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
|
||||
<p>해당 봇 사용에 주의해주세요.</p>
|
||||
<p>봇 소유자분은 <Link href='/guidelines'><a className='text-blue-500 hover:text-blue-400'>가이드라인</a></Link>에 대한 위반사항을 확인해주시고 <Link href='/discord'><a className='text-blue-500 hover:text-blue-400'>디스코드 서버</a></Link>로 문의해주세요.</p>
|
||||
</Message> : ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<Divider className='px-5' />
|
||||
<div className='lg:flex lg:flex-row-reverse' style={bg ? { color: 'white' } : {}}>
|
||||
<div className='mb-1 w-full lg:w-1/4'>
|
||||
<h2 className='3xl mb-2 font-bold'>정보</h2>
|
||||
<div className='grid gap-4 grid-cols-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white rounded-sm'>
|
||||
<div>
|
||||
<i className='far fa-flag' /> 접두사
|
||||
</div>
|
||||
<div className='markdown-body text-black dark:text-gray-400'>
|
||||
<code>{data.prefix}</code>
|
||||
</div>
|
||||
<div>
|
||||
<i className='fas fa-users' /> 서버수
|
||||
</div>
|
||||
<div>{data.servers || 'N/A'}</div>
|
||||
<div>
|
||||
<i className='fas fa-calendar-day' /> 봇 생성일
|
||||
</div>
|
||||
<div>{Day(date).fromNow(false)}</div>
|
||||
{
|
||||
checkBotFlag(data.flags, 'trusted') ?
|
||||
<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
|
||||
<div>
|
||||
<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
|
||||
</div>
|
||||
</Tooltip>
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
|
||||
<div className='flex flex-wrap'>
|
||||
{data.category.map(el => (
|
||||
<Tag key={el} text={el} href={`/categories/${el}`} />
|
||||
))}
|
||||
</div>
|
||||
<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
|
||||
{(data.owners as User[]).map(el => (
|
||||
<Owner
|
||||
key={el.id}
|
||||
id={el.id}
|
||||
tag={el.tag}
|
||||
username={el.username}
|
||||
<div className='lg:flex w-full'>
|
||||
<div className='w-full text-center lg:w-1/4'>
|
||||
<DiscordAvatar
|
||||
userID={data.id}
|
||||
className='w-full'
|
||||
/>
|
||||
))}
|
||||
<div className='list grid'>
|
||||
<a className='text-red-600 hover:underline cursor-pointer' onClick={() => {
|
||||
if(!user) toLogin()
|
||||
else setReportModal(true)
|
||||
}} aria-hidden='true'>
|
||||
<i className='far fa-flag' />
|
||||
신고하기
|
||||
</a>
|
||||
<Modal header={`${data.name}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
|
||||
setReportModal(false)
|
||||
setReportRes(null)
|
||||
}} full dark={theme === 'dark'}>
|
||||
{
|
||||
reportRes?.code === 200 ? <Message type='success'>
|
||||
<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
|
||||
<p>더 자세한 설명이 필요할 수 있습니다! <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요</p>
|
||||
</Message> : <Formik onSubmit={async (body) => {
|
||||
const res = await Fetch<null>(`/bots/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
|
||||
setReportRes(res)
|
||||
}} validationSchema={ReportSchema} initialValues={{
|
||||
category: null,
|
||||
description: '',
|
||||
_csrf: csrfToken
|
||||
}}>
|
||||
{
|
||||
({ errors, touched, values, setFieldValue }) => (
|
||||
<Form>
|
||||
<div className='mb-5'>
|
||||
{
|
||||
reportRes && <div className='my-5'>
|
||||
<Message type='error'>
|
||||
<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
|
||||
<ul className='list-disc'>
|
||||
{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
}
|
||||
<h3 className='font-bold'>신고 구분</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>해당되는 항복을 선택해주세요.</p>
|
||||
{
|
||||
reportCats.map(el =>
|
||||
<div key={el}>
|
||||
<label>
|
||||
<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
|
||||
{el}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category : null}</div>
|
||||
<h3 className='font-bold mt-2'>설명</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>신고하시는 내용을 자세하게 설명해주세요.</p>
|
||||
<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.description} setValue={(value) => setFieldValue('description', value)} />
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<Button className='bg-gray-500 hover:opacity-90 text-white' onClick={()=> setReportModal(false)}>취소</Button>
|
||||
<Button type='submit' className='bg-red-500 hover:opacity-90 text-white'>제출</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
}
|
||||
</Modal>
|
||||
{data.discord && (
|
||||
<a
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
className='text-discord-blurple hover:underline'
|
||||
href={`https://discord.gg/${data.discord}`}
|
||||
>
|
||||
<i className='fab fa-discord' />
|
||||
디스코드 서버
|
||||
</a>
|
||||
)}
|
||||
{data.web && (
|
||||
<a
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
className='text-blue-500 hover:underline'
|
||||
href={data.web}
|
||||
>
|
||||
<i className='fas fa-globe' />
|
||||
웹사이트
|
||||
</a>
|
||||
)}
|
||||
{data.git && (
|
||||
<a
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
className='hover:underline'
|
||||
href={data.git}
|
||||
>
|
||||
<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
|
||||
{git?.[new URL(data.git).hostname].text ?? 'Git'}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<Advertisement size='tall' />
|
||||
<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
|
||||
<Tag
|
||||
circular
|
||||
text={
|
||||
<>
|
||||
<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '}
|
||||
{Status[data.status]?.text}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>
|
||||
{data.name}{' '}
|
||||
{checkBotFlag(data.flags, 'trusted') ? (
|
||||
<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
|
||||
<span className='text-koreanbots-blue text-3xl'>
|
||||
<i className='fas fa-award' />
|
||||
</span>
|
||||
</Tooltip>
|
||||
) : ''}
|
||||
</h1>
|
||||
<p className={`${bg ? 'text-gray-300' : 'dark:text-gray-300 text-gray-800'} text-base`}>{data.intro}</p>
|
||||
</div>
|
||||
<div className='w-full lg:w-1/4'>
|
||||
{
|
||||
data.state === 'ok' && <LongButton
|
||||
newTab
|
||||
href={
|
||||
data.url ||
|
||||
`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
|
||||
}
|
||||
>
|
||||
<h4 className='whitespace-nowrap'>
|
||||
<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
|
||||
</h4>
|
||||
</LongButton>
|
||||
}
|
||||
<Link href={{ pathname: `/bots/${router.query.id}/vote` }}>
|
||||
<LongButton>
|
||||
<h4>
|
||||
<i className='fas fa-heart text-red-600' /> 하트 추가
|
||||
</h4>
|
||||
<span className='ml-1 px-2 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'>
|
||||
{formatNumber(data.votes)}
|
||||
</span>
|
||||
</LongButton>
|
||||
</Link>
|
||||
{
|
||||
((data.owners as User[]).find(el => el.id === user?.id) || checkUserFlag(user?.flags, 'staff')) && <LongButton href={`/manage/${data.id}`}>
|
||||
<h4>
|
||||
<i className='fas fa-cogs' /> 관리하기
|
||||
</h4>
|
||||
</LongButton>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
|
||||
<Advertisement />
|
||||
<Segment className='my-4'>
|
||||
<Markdown text={data.desc}/>
|
||||
</Segment>
|
||||
<Advertisement />
|
||||
<Divider className='px-5' />
|
||||
<div className='lg:flex lg:flex-row-reverse' style={bg ? { color: 'white' } : {}}>
|
||||
<div className='mb-1 w-full lg:w-1/4'>
|
||||
<h2 className='3xl mb-2 font-bold'>정보</h2>
|
||||
<div className='grid gap-4 grid-cols-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white rounded-sm'>
|
||||
<div>
|
||||
<i className='far fa-flag' /> 접두사
|
||||
</div>
|
||||
<div className='markdown-body text-black dark:text-gray-400'>
|
||||
<code>{data.prefix}</code>
|
||||
</div>
|
||||
<div>
|
||||
<i className='fas fa-users' /> 서버수
|
||||
</div>
|
||||
<div>{data.servers || 'N/A'}</div>
|
||||
<div>
|
||||
<i className='fas fa-calendar-day' /> 봇 생성일
|
||||
</div>
|
||||
<div>{Day(date).fromNow(false)}</div>
|
||||
{
|
||||
checkBotFlag(data.flags, 'trusted') ?
|
||||
<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
|
||||
<div>
|
||||
<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
|
||||
</div>
|
||||
</Tooltip>
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
|
||||
<div className='flex flex-wrap'>
|
||||
{data.category.map(el => (
|
||||
<Tag key={el} text={el} href={`/categories/${el}`} />
|
||||
))}
|
||||
</div>
|
||||
<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
|
||||
{(data.owners as User[]).map(el => (
|
||||
<Owner
|
||||
key={el.id}
|
||||
id={el.id}
|
||||
tag={el.tag}
|
||||
username={el.username}
|
||||
/>
|
||||
))}
|
||||
<div className='list grid'>
|
||||
<a className='text-red-600 hover:underline cursor-pointer' onClick={() => {
|
||||
if(!user) toLogin()
|
||||
else setReportModal(true)
|
||||
}} aria-hidden='true'>
|
||||
<i className='far fa-flag' />
|
||||
신고하기
|
||||
</a>
|
||||
<Modal header={`${data.name}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
|
||||
setReportModal(false)
|
||||
setReportRes(null)
|
||||
}} full dark={theme === 'dark'}>
|
||||
{
|
||||
reportRes?.code === 200 ? <Message type='success'>
|
||||
<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
|
||||
<p>더 자세한 설명이 필요할 수 있습니다! <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요</p>
|
||||
</Message> : <Formik onSubmit={async (body) => {
|
||||
const res = await Fetch<null>(`/bots/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
|
||||
setReportRes(res)
|
||||
}} validationSchema={ReportSchema} initialValues={{
|
||||
category: null,
|
||||
description: '',
|
||||
_csrf: csrfToken
|
||||
}}>
|
||||
{
|
||||
({ errors, touched, values, setFieldValue }) => (
|
||||
<Form>
|
||||
<div className='mb-5'>
|
||||
{
|
||||
reportRes && <div className='my-5'>
|
||||
<Message type='error'>
|
||||
<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
|
||||
<ul className='list-disc'>
|
||||
{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
}
|
||||
<h3 className='font-bold'>신고 구분</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>해당되는 항복을 선택해주세요.</p>
|
||||
{
|
||||
reportCats.map(el =>
|
||||
<div key={el}>
|
||||
<label>
|
||||
<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
|
||||
{el}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category : null}</div>
|
||||
<h3 className='font-bold mt-2'>설명</h3>
|
||||
<p className='text-gray-400 text-sm mb-1'>신고하시는 내용을 자세하게 설명해주세요.</p>
|
||||
<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.description} setValue={(value) => setFieldValue('description', value)} />
|
||||
<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
|
||||
</div>
|
||||
<div className='text-right'>
|
||||
<Button className='bg-gray-500 hover:opacity-90 text-white' onClick={()=> setReportModal(false)}>취소</Button>
|
||||
<Button type='submit' className='bg-red-500 hover:opacity-90 text-white'>제출</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
}
|
||||
</Modal>
|
||||
{data.discord && (
|
||||
<a
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
className='text-discord-blurple hover:underline'
|
||||
href={`https://discord.gg/${data.discord}`}
|
||||
>
|
||||
<i className='fab fa-discord' />
|
||||
디스코드 서버
|
||||
</a>
|
||||
)}
|
||||
{data.web && (
|
||||
<a
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
className='text-blue-500 hover:underline'
|
||||
href={data.web}
|
||||
>
|
||||
<i className='fas fa-globe' />
|
||||
웹사이트
|
||||
</a>
|
||||
)}
|
||||
{data.git && (
|
||||
<a
|
||||
rel='noopener noreferrer'
|
||||
target='_blank'
|
||||
className='hover:underline'
|
||||
href={data.git}
|
||||
>
|
||||
<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
|
||||
{git?.[new URL(data.git).hostname].text ?? 'Git'}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<Advertisement size='tall' />
|
||||
</div>
|
||||
<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
|
||||
<Advertisement />
|
||||
<Segment className='my-4'>
|
||||
<Markdown text={data.desc}/>
|
||||
</Segment>
|
||||
<Advertisement />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
}
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
@ -24,19 +24,17 @@ const Category: NextPage<CategoryProps> = ({ data, query }) => {
|
||||
<Hero header={`${query.category} 카테고리 봇들`} description={`다양한 "${query.category}" 카테고리의 봇들을 만나보세요.`} />
|
||||
<SEO title={`${query.category} 카테고리 봇들`} description={`다양한 ${query.category} 카테고리의 봇들을 만나보세요.`} />
|
||||
{
|
||||
query.category === 'NSFW' && !nsfw ? <NSFW onClick={() => {
|
||||
localStorage.nsfw = true
|
||||
setNSFW(true)
|
||||
}} /> : <Container>
|
||||
<Advertisement />
|
||||
<ResponsiveGrid>
|
||||
{
|
||||
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
|
||||
}
|
||||
</ResponsiveGrid>
|
||||
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/categories/${query.category}`} />
|
||||
<Advertisement />
|
||||
</Container>
|
||||
query.category === 'NSFW' && !nsfw ? <NSFW onClick={() => setNSFW(true)} onDisableClick={() => localStorage.nsfw = true} />
|
||||
: <Container>
|
||||
<Advertisement />
|
||||
<ResponsiveGrid>
|
||||
{
|
||||
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
|
||||
}
|
||||
</ResponsiveGrid>
|
||||
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/categories/${query.category}`} />
|
||||
<Advertisement />
|
||||
</Container>
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user