From acf6aaad34538203a84ec88012dfb1ae2e2b803c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Thu, 7 Jan 2021 22:54:50 +0900
Subject: [PATCH] feat: Bot Page

---
 pages/bots/[id].tsx | 80 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 71 insertions(+), 9 deletions(-)

diff --git a/pages/bots/[id].tsx b/pages/bots/[id].tsx
index 775fac9..a361c8b 100644
--- a/pages/bots/[id].tsx
+++ b/pages/bots/[id].tsx
@@ -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