From 1c4a733e6ea661e5d2ceb0569a228e04a6386e75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Fri, 8 Jan 2021 22:18:49 +0900
Subject: [PATCH] feat: added contents and prettier

---
 pages/bots/[id].tsx | 228 ++++++++++++++++++++++++++++----------------
 1 file changed, 144 insertions(+), 84 deletions(-)

diff --git a/pages/bots/[id].tsx b/pages/bots/[id].tsx
index 8decfb9..4ed7039 100644
--- a/pages/bots/[id].tsx
+++ b/pages/bots/[id].tsx
@@ -17,108 +17,168 @@ import { Status } from '../../utils/Constants'
 import { Fetch, formatNumber } from '../../utils'
 import Advertisement from '../../components/Advertisement'
 
-const Bots:NextPage<BotsProps> = ({ data, date, votes}) => {
-	console.log(data)
-	if(!data.id) return <NotFound />
-	return <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`} />
-		<div className='lg:flex'>
-			<div className='w-full lg:w-1/4 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 lg:w-5/12'>
-				<div>
-					<Tag circular text={(<><i className={`fas fa-circle text-${Status[data.status]?.color}`}/> {Status[data.status]?.text}</>)}/>
-					<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>
+const Bots: NextPage<BotsProps> = ({ data, date, votes }) => {
+	if (!data.id) return <NotFound />
+	return (
+		<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`
+				}
+			/>
+			<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>
-				<p className='text-base text-gray-800 dark:text-gray-300'>{data.intro}</p>
-			</div>
-			<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`}>
-					<h4 className="whitespace-nowrap"><i className="fas fa-user-plus" /> 초대하기</h4>
-				</LongButton>
-				<LongButton>
-
-					<h4><i className='far fa-heart text-pink-600' /> 하트 추가</h4>
-					<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>
-	
-				</LongButton>
-			</div>
-		
-			
-		</div>
-		<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><i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨</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 && (
+								<span className="text-koreanbots-blue text-3xl">
+									<i className="fas fa-award" />
+								</span>
+							)}
+						</h1>
+					</div>
+					<p className="dark:text-gray-300 text-gray-800 text-base">{data.intro}</p>
 				</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 className="w-full lg:w-1/4">
+					<LongButton
+						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>
+						<h4>
+							<i className="fas fa-heart text-red-600" /> 하트 추가
+						</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>
 				</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} /> ) }
-				<Advertisement />
 			</div>
-			<div className='markdown-body w-full lg:w-3/4 lg:pr-5 pt-10'>
-				<Advertisement />
-				<Segment>
-					<h1>이 메세지는 테스트 메세지입니다.</h1>
-					<h2>아이유 짱</h2>
-					<code>yee</code><br/><br/>
-					<pre>멋진 코드블럭</pre>
-					<hr />
+			<Divider className="px-5" />
+			<div className="lg:flex lg:flex-row-reverse">
+				<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">
+						<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>
+							<i className="fas fa-check text-discord-blurple" /> 디스코드 인증됨
+						</div>
+					</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}
+							avatarHash={el.avatar}
+							username={el.username}
+						/>
+					))}
+					<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>
-						<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>
+						<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>
-				<Advertisement />
+						<ul className="list-decimal">
+							<li>first</li>
+							<li>second</li>
+						</ul>
+					</Segment>
+					<Advertisement />
+				</div>
 			</div>
-			
-		</div>
-	</Container>
+		</Container>
+	)
 }
 
 export const getServerSideProps = async (ctx: Context) => {
 	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
 
 interface BotsProps {
-  data: Bot
-  date: Date
-  votes: string
+	data: Bot
+	date: Date
+	votes: string
 }
 interface Context extends NextPageContext {
-  query: Query
+	query: Query
 }
 
 interface Query extends ParsedUrlQuery {
-  id: string
-}
\ No newline at end of file
+	id: string
+}