wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-16 14:30:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Bot Page

Browse Source
This commit is contained in:
원더 2021-01-07 22:54:50 +09:00
parent 140a6247d3
commit acf6aaad34
1 changed files with 71 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
pages/bots/[id].tsx
View File

@ -1,34 +1,96 @@
import { NextPage, NextPageContext } from 'next'
import { SnowflakeUtil } from 'discord.js'
import Day from '../../utils/Day'
import { ParsedUrlQuery } from 'querystring'
import Container from '../../components/Container'
import DiscordImage from '../../components/DiscordImage'
import { Bot } from '../../types'
import Divider from '../../components/Divider'
import Label from '../../components/Labal'
import Owner from '../../components/Owner'
import Segment from '../../components/Segment'
import { Bot, User } from '../../types'
import Fetch from '../../utils/Fetch'
import NotFound from '../404'
const Bots:NextPage<BotsProps> = ({ data }) => {
const Bots:NextPage<BotsProps> = ({ data, date }) => {
console.log(data)
if(!data.id) return <NotFound />
return <Container paddingTop className='py-10 lg:flex'>
<div className='w-full lg:w-1/3 flex-col'>
<DiscordImage userID={data.id} avatarHash={data.avatar} tag={data.tag} className='w-full'/>
return <Container paddingTop className='py-10'>
<div className='lg:flex'>
<div className='w-full lg:w-1/3 text-center'>
<DiscordImage userID={data.id} avatarHash={data.avatar} tag={data.tag} className='w-full'/>
</div>
<div className='py-12 px-5 w-full text-center lg:text-left flex-grow'>
<div className='flex'>
<h1 className='text-4xl font-bold mb-2'>{data.name} {data.trusted && <span className='text-koreanbots-blue text-3xl'><i className='fas fa-award' /></span>}</h1>
</div>
<p className='text-base text-gray-800 dark:text-gray-300'>{data.desc}</p>
</div>
</div>
<div className='py-10 px-4 flex-col w-full text-center lg:text-left'>
<h1 className='text-4xl font-bold mb-5'>{data.name}</h1>
<p className='text-base'>{data.desc}</p>
<Divider className='px-5' />
<div className='lg:flex lg:flex-row-reverse'>
<div className='w-full lg:w-1/4 mb-1'>
<h2 className='3xl font-bold mb-2'>정보</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><i className="far fa-flag" /> 접두사</div>
<div>{data.prefix}</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>
</div>
<h2 className='3xl font-bold mt-2 mb-2'>카테고리</h2>
<div className='flex flex-wrap'>
{ data.category.map(el=> <Label key={el} text={el} href={`/categories/${el}`} /> ) }
</div>
<h2 className='3xl font-bold mt-2 mb-2'>제작자</h2>
{ (data.owners as User[]).map(el=> <Owner key={el.id} id={el.id} tag={el.tag} avatarHash={el.avatar} username={el.username} /> ) }
</div>
<div className='markdown-body w-full lg:w-3/4 lg:pr-5 pt-10'>
<Segment>
<h1>이 메세지는 테스트 메세지입니다.</h1>
<h2>아이유 짱</h2>
<code>yee</code><br/><br/>
<pre>멋진 코드블럭</pre>
<hr />
<table>
<th>foo</th>
<th>bar</th>
<tbody>
<td>pizza</td>
<td>apple</td>
</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>
</div>
</div>
</Container>
}
export const getServerSideProps = async (ctx: Context) => {
const data = await Fetch.bot.load(ctx.query.id)
return { props: { data } }
return { props: { data, date: SnowflakeUtil.deconstruct(data.id).date.toJSON() } }
}
export default Bots
interface BotsProps {
data: Bot
date: Date
}
interface Context extends NextPageContext {
query: Query