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

feat: using Hero component

Browse Source
This commit is contained in:
원더 2021-01-30 12:43:07 +09:00
parent fe41cd5e6e
commit 887efa03ca
3 changed files with 61 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/Hero.tsx Normal file
View File

@ -0,0 +1,44 @@
import dynamic from 'next/dynamic'
import { categories, categoryIcon } from '@utils/Constants'
const Container = dynamic(()=> import('@components/Container'))
const Wave = dynamic(()=> import('@components/Wave'))
const Tag = dynamic(()=> import('@components/Tag'))
const Search = dynamic(()=> import('@components/Search'))
const Hero = ({ header, description }:HeroProps):JSX.Element => {
return <>
<div className='dark:bg-discord-black bg-discord-blurple'>
<Container className='pt-12' ignoreColor paddingTop>
<h1 className='text-center sm:text-left text-gray-100 text-3xl font-bold'>
{ header && `${header} - `}한국 디스코드봇 리스트
</h1>
<p className='text-center sm:text-left text-xl font-base mt-2'>{description || '다양한 국내 디스코드봇을 한곳에서 확인하세요!'}</p>
<Search />
<div className='flex flex-wrap mt-5'>
<Tag key='list' text={<>
<i className='fas fa-heart text-red-600'/> 하트 랭킹
</>} dark bigger href='/list/votes' />
{ categories.slice(0, 4).map(t=> <Tag key={t} text={<>
<i className={categoryIcon[t]} /> {t}
</>} dark bigger href={`/categories/${t}`} />) }
<Tag key='tag' text={<>
<i className='fas fa-tag'/> 카테고리 더보기
</>} dark bigger href='/categories' />
</div>
</Container>
</div>
<Wave
color='currentColor'
className='dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white hidden md:block'
/>
</>
}
interface HeroProps {
header?: string
description?: string
}
export default Hero

30
pages/index.tsx
View File

@ -3,43 +3,17 @@ import dynamic from 'next/dynamic'
import { BotList } from '@types'
import * as Query from '@utils/Query'
import { categories, categoryIcon } from '@utils/Constants'
const Advertisement = dynamic(()=> import('@components/Advertisement'))
const Container = dynamic(()=> import('@components/Container'))
const BotCard = dynamic(()=> import('@components/BotCard'))
const Wave = dynamic(()=> import('@components/Wave'))
const Tag = dynamic(()=> import('@components/Tag'))
const Search = dynamic(()=> import('@components/Search'))
const Paginator = dynamic(()=> import('@components/Paginator'))
const Hero = dynamic(() => import('@components/Hero'))
const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
return (
<>
<div className='dark:bg-discord-black bg-discord-blurple'>
<Container className='pb-24 pt-20' ignoreColor paddingTop>
<h1 className='text-center text-gray-100 text-3xl font-bold sm:text-left'>
한국 디스코드봇 리스트
</h1>
<Search />
<div className='flex flex-wrap mt-5'>
<Tag key='list' text={<>
<i className='fas fa-heart text-red-600'/> 하트 랭킹
</>} dark bigger href='/list/votes' />
{ categories.slice(0, 5).map(t=> <Tag key={t} text={<>
<i className={categoryIcon[t]} /> {t}
</>} dark bigger href={`/categories/${t}`} />) }
<Tag key='tag' text={<>
<i className='fas fa-tag'/> 카테고리 더보기
</>} dark bigger href='/categories' />
</div>
</Container>
</div>
<Wave
color='currentColor'
className='dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white hidden md:block'
/>
<Hero />
<Container>
<Advertisement />
<h1 className='text-3xl font-bold'>

29
pages/list/votes.tsx
View File

@ -1,4 +1,5 @@
import { NextPage, NextPageContext } from 'next'
import { useRouter } from 'next/router'
import dynamic from 'next/dynamic'
import { ParsedUrlQuery } from 'querystring'
@ -7,9 +8,10 @@ import * as Query from '@utils/Query'
import NotFound from '../404'
import { PageCount } from '@utils/Yup'
import { useRouter } from 'next/router'
const Hero = dynamic(() => import('@components/Hero'))
const Advertisement = dynamic(() => import('@components/Advertisement'))
const SEO = dynamic(() => import('@components/SEO'))
const BotCard = dynamic(() => import('@components/BotCard'))
const Container = dynamic(() => import('@components/Container'))
const Paginator = dynamic(() => import('@components/Paginator'))
@ -17,19 +19,18 @@ const Paginator = dynamic(() => import('@components/Paginator'))
const Votes:NextPage<VotesProps> = ({ data }) => {
const router = useRouter()
if(!data || data.data.length === 0 || data.totalPage < Number(router.query.page)) return <NotFound />
return <Container paddingTop>
<h1 className='text-3xl font-bold mt-5'>
<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹 - {data.currentPage}페이지
</h1>
<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
<Advertisement />
<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
</Container>
return <>
<Hero header='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
<SEO title='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
<Container>
<Advertisement />
<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
</Container></>
}
export const getServerSideProps = async (ctx:Context) => {
let data: BotList