mirror of
https://github.com/koreanbots/core.git
synced 2025-12-16 14:30:22 +00:00
feat: added contents and prettier
This commit is contained in:
원더
parent
7d530d09e5
commit
1c4a733e6e
@ -17,64 +17,118 @@ import { Status } from '../../utils/Constants'
|
|||||||
import { Fetch, formatNumber } from '../../utils'
|
import { Fetch, formatNumber } from '../../utils'
|
||||||
import Advertisement from '../../components/Advertisement'
|
import Advertisement from '../../components/Advertisement'
|
||||||
|
|
||||||
const Bots:NextPage<BotsProps> = ({ data, date, votes}) => {
|
const Bots: NextPage<BotsProps> = ({ data, date, votes }) => {
|
||||||
console.log(data)
|
if (!data.id) return <NotFound />
|
||||||
if(!data.id) return <NotFound />
|
return (
|
||||||
return <Container paddingTop className='py-10'>
|
<Container paddingTop className="py-10">
|
||||||
<SEO title={data.name} description={data.intro} image={data.avatar ? `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`} />
|
<SEO
|
||||||
<div className='lg:flex'>
|
title={data.name}
|
||||||
<div className='w-full lg:w-1/4 text-center'>
|
description={data.intro}
|
||||||
<DiscordImage userID={data.id} avatarHash={data.avatar} tag={data.tag} className='w-full'/>
|
image={
|
||||||
|
data.avatar
|
||||||
|
? `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`
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<div className="lg:flex">
|
||||||
|
<div className="w-full text-center lg:w-1/4">
|
||||||
|
<DiscordImage
|
||||||
|
userID={data.id}
|
||||||
|
avatarHash={data.avatar}
|
||||||
|
tag={data.tag}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='py-12 px-5 w-full text-center lg:text-left flex-grow lg:w-5/12'>
|
<div className="flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left">
|
||||||
<div>
|
<div>
|
||||||
<Tag circular text={(<><i className={`fas fa-circle text-${Status[data.status]?.color}`}/> {Status[data.status]?.text}</>)}/>
|
<Tag
|
||||||
<h1 className='text-4xl font-bold mb-2 mt-3'>{data.name} {data.trusted && <span className='text-koreanbots-blue text-3xl'><i className='fas fa-award' /></span>}</h1>
|
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 && (
|
||||||
|
<span className="text-koreanbots-blue text-3xl">
|
||||||
|
<i className="fas fa-award" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<p className='text-base text-gray-800 dark:text-gray-300'>{data.intro}</p>
|
<p className="dark:text-gray-300 text-gray-800 text-base">{data.intro}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className='w-full lg:w-1/4'>
|
<div className="w-full lg:w-1/4">
|
||||||
<LongButton href={data.url || `https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`}>
|
<LongButton
|
||||||
<h4 className="whitespace-nowrap"><i className="fas fa-user-plus" /> 초대하기</h4>
|
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>
|
</LongButton>
|
||||||
<LongButton>
|
<LongButton>
|
||||||
|
<h4>
|
||||||
<h4><i className='far fa-heart text-pink-600' /> 하트 추가</h4>
|
<i className="fas fa-heart text-red-600" /> 하트 추가
|
||||||
<span className='text-sm bg-little-white-hover dark:bg-very-black text-black dark:text-gray-400 px-2 py-1 rounded-lg ml-1 text-center'>{votes}</span>
|
</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">
|
||||||
|
{votes}
|
||||||
|
</span>
|
||||||
</LongButton>
|
</LongButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<Divider className='px-5' />
|
<Divider className="px-5" />
|
||||||
<div className='lg:flex lg:flex-row-reverse'>
|
<div className="lg:flex lg:flex-row-reverse">
|
||||||
<div className='w-full lg:w-1/4 mb-1'>
|
<div className="mb-1 w-full lg:w-1/4">
|
||||||
<h2 className='3xl font-bold mb-2'>정보</h2>
|
<h2 className="3xl mb-2 font-bold">정보</h2>
|
||||||
<div className='grid grid-cols-2 gap-4 bg-little-white dark:bg-discord-black text-black dark:text-gray-400 px-4 py-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">
|
||||||
<div><i className="far fa-flag" /> 접두사</div>
|
<div>
|
||||||
|
<i className="far fa-flag" /> 접두사
|
||||||
|
</div>
|
||||||
<div>{data.prefix}</div>
|
<div>{data.prefix}</div>
|
||||||
<div><i className="fas fa-users" /> 서버수</div>
|
<div>
|
||||||
|
<i className="fas fa-users" /> 서버수
|
||||||
|
</div>
|
||||||
<div>{data.servers}</div>
|
<div>{data.servers}</div>
|
||||||
<div><i className="fas fa-calendar-day" /> 봇 생성일</div>
|
<div>
|
||||||
|
<i className="fas fa-calendar-day" /> 봇 생성일
|
||||||
|
</div>
|
||||||
<div>{Day(date).fromNow(false)}</div>
|
<div>{Day(date).fromNow(false)}</div>
|
||||||
<div><i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨</div>
|
<div>
|
||||||
|
<i className="fas fa-check text-discord-blurple" /> 디스코드 인증됨
|
||||||
</div>
|
</div>
|
||||||
<h2 className='3xl font-bold mt-2 mb-2'>카테고리</h2>
|
|
||||||
<div className='flex flex-wrap'>
|
|
||||||
{ data.category.map(el=> <Tag key={el} text={el} href={`/categories/${el}`} /> ) }
|
|
||||||
</div>
|
</div>
|
||||||
<h2 className='3xl font-bold mt-2 mb-2'>제작자</h2>
|
<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} avatarHash={el.avatar} username={el.username} /> ) }
|
<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}
|
||||||
|
avatarHash={el.avatar}
|
||||||
|
username={el.username}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
<Advertisement />
|
<Advertisement />
|
||||||
</div>
|
</div>
|
||||||
<div className='markdown-body w-full lg:w-3/4 lg:pr-5 pt-10'>
|
<div className="markdown-body pt-10 w-full lg:pr-5 lg:w-3/4">
|
||||||
<Advertisement />
|
<Advertisement />
|
||||||
<Segment>
|
<Segment>
|
||||||
<h1>이 메세지는 테스트 메세지입니다.</h1>
|
<h1>이 메세지는 테스트 메세지입니다.</h1>
|
||||||
<h2>아이유 짱</h2>
|
<h2>아이유 짱</h2>
|
||||||
<code>yee</code><br/><br/>
|
<code>yee</code>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
<pre>멋진 코드블럭</pre>
|
<pre>멋진 코드블럭</pre>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
@ -86,26 +140,32 @@ const Bots:NextPage<BotsProps> = ({ data, date, votes}) => {
|
|||||||
<td>apple</td>
|
<td>apple</td>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<ul className='list-disc'>
|
<ul className="list-disc">
|
||||||
<li>first</li>
|
<li>first</li>
|
||||||
<li>second</li>
|
<li>second</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul className='list-decimal'>
|
<ul className="list-decimal">
|
||||||
<li>first</li>
|
<li>first</li>
|
||||||
<li>second</li>
|
<li>second</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Segment>
|
</Segment>
|
||||||
<Advertisement />
|
<Advertisement />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getServerSideProps = async (ctx: Context) => {
|
export const getServerSideProps = async (ctx: Context) => {
|
||||||
const data = await Fetch.bot.load(ctx.query.id)
|
const data = await Fetch.bot.load(ctx.query.id)
|
||||||
return { props: { data, date: SnowflakeUtil.deconstruct(data.id ?? '0').date.toJSON(), votes: formatNumber(data.votes ?? 0, 3) } }
|
return {
|
||||||
|
props: {
|
||||||
|
data,
|
||||||
|
date: SnowflakeUtil.deconstruct(data.id ?? '0').date.toJSON(),
|
||||||
|
votes: formatNumber(data.votes ?? 0, 3),
|
||||||
|
},
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Bots
|
export default Bots
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user