chore: changed some

This commit is contained in:
원더 2021-01-23 11:47:29 +09:00
parent a99c30ff11
commit d2bbff15a1

View File

@ -22,200 +22,198 @@ import Tooltip from '../../components/Tooltip'
const Bots: NextPage<BotsProps> = ({ data, date }) => { const Bots: NextPage<BotsProps> = ({ data, date }) => {
if (!data || !data.id) return <NotFound /> if (!data || !data.id) return <NotFound />
return ( return <Container paddingTop className='py-10'>
<Container paddingTop className='py-10'> <SEO
<SEO title={data.name}
title={data.name} description={data.intro}
description={data.intro} image={
image={ data.avatar
data.avatar ? `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.png?size=1024`
? `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.png?size=1024` : `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024`
: `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024` }
} />
/> <div className='lg:flex w-full'>
<div className='lg:flex w-full'> <div className='w-full text-center lg:w-1/4'>
<div className='w-full text-center lg:w-1/4'> <DiscordAvatar
<DiscordAvatar userID={data.id}
userID={data.id} avatarHash={data.avatar}
avatarHash={data.avatar} tag={data.tag}
tag={data.tag} className='w-full'
className='w-full' />
</div>
<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
<div>
<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'>
{data.name}{' '}
{data.trusted ? (
<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
<span className='text-koreanbots-blue text-3xl'>
<i className='fas fa-award' />
</span>
</Tooltip>
) : ''}
</h1>
</div> </div>
<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'> <p className='dark:text-gray-300 text-gray-800 text-base'>{data.intro}</p>
<div> </div>
<Tag <div className='w-full lg:w-1/4'>
circular <LongButton
text={ newTab
<> href={
<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '} data.url ??
{Status[data.status]?.text}
</>
}
/>
<h1 className='mb-2 mt-3 text-4xl font-bold'>
{data.name}{' '}
{data.trusted ? (
<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
<span className='text-koreanbots-blue text-3xl'>
<i className='fas fa-award' />
</span>
</Tooltip>
) : ''}
</h1>
</div>
<p className='dark:text-gray-300 text-gray-800 text-base'>{data.intro}</p>
</div>
<div className='w-full lg:w-1/4'>
<LongButton
newTab
href={
data.url ??
`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0` `https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
} }
> >
<h4 className='whitespace-nowrap'> <h4 className='whitespace-nowrap'>
<i className='fas fa-user-plus text-discord-blurple' /> <i className='fas fa-user-plus text-discord-blurple' />
</h4> </h4>
</LongButton> </LongButton>
<LongButton> <LongButton>
<h4> <h4>
<i className='fas fa-heart text-red-600' /> <i className='fas fa-heart text-red-600' />
</h4> </h4>
<span className='ml-1 px-2 py-1 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'> <span className='ml-1 px-2 py-1 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'>
{formatNumber(data.votes)} {formatNumber(data.votes)}
</span> </span>
</LongButton> </LongButton>
</div>
</div> </div>
<Divider className='px-5' /> </div>
<div className='lg:flex lg:flex-row-reverse'> <Divider className='px-5' />
<div className='mb-1 w-full lg:w-1/4'> <div className='lg:flex lg:flex-row-reverse'>
<h2 className='3xl mb-2 font-bold'></h2> <div className='mb-1 w-full lg:w-1/4'>
<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'> <h2 className='3xl mb-2 font-bold'></h2>
<div> <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'>
<i className='far fa-flag' /> <div>
</div> <i className='far fa-flag' />
<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}</div>
<div>
<i className='fas fa-calendar-day' />
</div>
<div>{Day(date).fromNow(false)}</div>
{
data.verified ?
<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
<div>
<i className='fas fa-check text-discord-blurple' />
</div>
</Tooltip>
: ''
}
</div> </div>
<h2 className='3xl mb-2 mt-2 font-bold'></h2> <div className='markdown-body text-black dark:text-gray-400'>
<div className='flex flex-wrap'> <code>{data.prefix}</code>
{data.category.map(el => (
<Tag key={el} text={el} href={`/categories/${el}`} />
))}
</div> </div>
<h2 className='3xl mb-2 mt-2 font-bold'></h2> <div>
{(data.owners as User[]).map(el => ( <i className='fas fa-users' />
<Owner </div>
key={el.id} <div>{data.servers}</div>
id={el.id} <div>
tag={el.tag} <i className='fas fa-calendar-day' />
avatarHash={el.avatar} </div>
username={el.username} <div>{Day(date).fromNow(false)}</div>
/> {
data.verified ?
<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 className='list grid'> </div>
<Link href={`/bots/${data.id}/report`}> <h2 className='3xl mb-2 mt-2 font-bold'></h2>
<a className='text-red-600 hover:underline'> {(data.owners as User[]).map(el => (
<i className='far fa-flag' /> <Owner
key={el.id}
id={el.id}
tag={el.tag}
avatarHash={el.avatar}
username={el.username}
/>
))}
<div className='list grid'>
<Link href={`/bots/${data.id}/report`}>
<a className='text-red-600 hover:underline'>
<i className='far fa-flag' />
</a> </a>
</Link> </Link>
{data.discord && ( {data.discord && (
<a <a
rel='noopener noreferrer' rel='noopener noreferrer'
target='_blank' target='_blank'
className='text-discord-blurple hover:underline' className='text-discord-blurple hover:underline'
href={`https://discord.gg/${data.discord}`} href={`https://discord.gg/${data.discord}`}
> >
<i className='fab fa-discord' /> <i className='fab fa-discord' />
</a> </a>
)} )}
{data.web && ( {data.web && (
<a <a
rel='noopener noreferrer' rel='noopener noreferrer'
target='_blank' target='_blank'
className='text-blue-500 hover:underline' className='text-blue-500 hover:underline'
href={data.web} href={data.web}
> >
<i className='fas fa-globe' /> <i className='fas fa-globe' />
</a> </a>
)} )}
{data.git && ( {data.git && (
<a <a
rel='noopener noreferrer' rel='noopener noreferrer'
target='_blank' target='_blank'
className='hover:underline' className='hover:underline'
href={data.git} href={data.git}
> >
<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} /> <i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
{git?.[new URL(data.git).hostname].text ?? 'Git'} {git?.[new URL(data.git).hostname].text ?? 'Git'}
</a> </a>
)} )}
</div>
<Advertisement />
</div>
<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
<Advertisement />
<Segment>
<h1> .</h1>
<h2> </h2>
<code>yee</code>
<br />
<br />
<pre> </pre>
<hr />
<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>pizza</td>
<td>apple</td>
</tr>
</tbody>
</table>
<ul className='list-disc'>
<li>first</li>
<li>second</li>
</ul>
<ul className='list-decimal'>
<li>first</li>
<li>second</li>
</ul>
</Segment>
<Advertisement />
</div> </div>
<Advertisement />
</div> </div>
</Container> <div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
) <Advertisement />
<Segment>
<h1> .</h1>
<h2> </h2>
<code>yee</code>
<br />
<br />
<pre> </pre>
<hr />
<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>pizza</td>
<td>apple</td>
</tr>
</tbody>
</table>
<ul className='list-disc'>
<li>first</li>
<li>second</li>
</ul>
<ul className='list-decimal'>
<li>first</li>
<li>second</li>
</ul>
</Segment>
<Advertisement />
</div>
</div>
</Container>
} }
export const getServerSideProps = async (ctx: Context) => { export const getServerSideProps = async (ctx: Context) => {