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: added ResponsiveGrid component

Browse Source
This commit is contained in:
wonderlandpark 2021-03-03 14:25:09 +09:00
parent 0916cc335a
commit 84af82938a
8 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/BotCard.tsx
View File

@ -28,7 +28,7 @@ const BotCard = ({ manage = false, bot }: BotProps): JSX.Element => {
<Link href={makeBotURL(bot)}>
<a className='cursor-pointer'>
<div className='flex h-44'>
<div className='w-2/3'>
<div className='w-3/5'>
<div className='flex justify-start'>
<DiscordAvatar
size={128}
@ -46,7 +46,7 @@ const BotCard = ({ manage = false, bot }: BotProps): JSX.Element => {
<h1 className='mb-3 text-left text-2xl font-bold truncate'>{bot.name}</h1>
</div>
</div>
<div className='grid grid-cols-1 pr-5 py-5 w-1/3 h-0'>
<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
<Tag
text={
<>

9
components/ResponsiveGrid.tsx Normal file
View File

@ -0,0 +1,9 @@
import { ReactNode } from 'react'
const ResponsiveGrid = ({ children }:{ children: ReactNode }):JSX.Element => {
return <div className='grid gap-x-4 grid-rows-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 mt-10 -mb-10'>
{children}
</div>
}
export default ResponsiveGrid

5
pages/categories/[category].tsx
View File

@ -10,6 +10,7 @@ import NotFound from 'pages/404'
const Hero = dynamic(() => import('@components/Hero'))
const Advertisement = dynamic(() => import('@components/Advertisement'))
const SEO = dynamic(() => import('@components/SEO'))
const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
const BotCard = dynamic(() => import('@components/BotCard'))
const Container = dynamic(() => import('@components/Container'))
const Paginator = dynamic(() => import('@components/Paginator'))
@ -22,11 +23,11 @@ const Category: NextPage<CategoryProps> = ({ data, query }) => {
<Container>
<Advertisement />
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
<ResponsiveGrid>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
</ResponsiveGrid>
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/categories/${query.category}`} />
<Advertisement />
</Container>

21
pages/index.tsx
View File

@ -5,10 +5,11 @@ import { BotList } from '@types'
import * as Query from '@utils/Query'
import LongButton from '@components/LongButton'
const Advertisement = dynamic(()=> import('@components/Advertisement'))
const Container = dynamic(()=> import('@components/Container'))
const BotCard = dynamic(()=> import('@components/BotCard'))
const Paginator = dynamic(()=> import('@components/Paginator'))
const Advertisement = dynamic(() => import('@components/Advertisement'))
const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
const Container = dynamic(() => import('@components/Container'))
const BotCard = dynamic(() => import('@components/BotCard'))
const Paginator = dynamic(() => import('@components/Paginator'))
const Hero = dynamic(() => import('@components/Hero'))
const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
@ -21,32 +22,32 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹
</h1>
<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-10 -mb-10'>
<ResponsiveGrid>
{
votes.data.map(bot=> <BotCard key={bot.id} bot={bot} />)
}
</div>
</ResponsiveGrid>
<Paginator totalPage={votes.totalPage} currentPage={votes.currentPage} pathname='/list/votes' />
<Advertisement />
<h1 className='text-3xl font-bold mt-20 mb-2'>
<i className='far fa-star mr-3 text-yellow-500' /> 새로운 봇
</h1>
<p className='text-base'>최근에 한국 디스코드봇 리스트에 추가된 따끈따끈한 봇입니다.</p>
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
<ResponsiveGrid>
{
newBots.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
}
</div>
</ResponsiveGrid>
<LongButton href='/list/new' center>더보기</LongButton>
<h1 className='text-3xl font-bold mb-2'>
<i className='fa fa-check mr-3 mt-10 text-green-500' /> 신뢰된 봇
</h1>
<p className='text-base'>KOREANBOTS에서 인증받은 신뢰할 수 있는 봇들입니다!!</p>
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
<ResponsiveGrid>
{
trusted.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
}
</div>
</ResponsiveGrid>
<Advertisement />
</Container>
</>

5
pages/list/new.tsx
View File

@ -9,6 +9,7 @@ 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 ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
const New:NextPage<NewProps> = ({ data }) => {
return <>
@ -16,11 +17,11 @@ const New:NextPage<NewProps> = ({ data }) => {
<SEO title='새로운 봇' description='최근에 추가된 봇들입니다!' />
<Container>
<Advertisement />
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
<ResponsiveGrid>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
</ResponsiveGrid>
<Advertisement />
</Container>
</>

5
pages/list/votes.tsx
View File

@ -13,6 +13,7 @@ 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 ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
const Container = dynamic(() => import('@components/Container'))
const Paginator = dynamic(() => import('@components/Paginator'))
@ -24,11 +25,11 @@ const Votes:NextPage<VotesProps> = ({ data }) => {
<SEO title='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
<Container>
<Advertisement />
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
<ResponsiveGrid>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
</ResponsiveGrid>
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
<Advertisement />
</Container>

5
pages/search.tsx
View File

@ -14,6 +14,7 @@ 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 ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
const Paginator = dynamic(() => import('@components/Paginator'))
const Search:NextPage<SearchProps> = ({ data, query }) => {
@ -29,11 +30,11 @@ const Search:NextPage<SearchProps> = ({ data, query }) => {
<Advertisement />
{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
<>
<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
<ResponsiveGrid>
{
data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
}
</div>
</ResponsiveGrid>
<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?q=${query.q}`} />
</>
}

5
pages/users/[id].tsx
View File

@ -15,6 +15,7 @@ const SEO = dynamic(() => import('@components/SEO'))
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
const Divider = dynamic(() => import('@components/Divider'))
const BotCard = dynamic(() => import('@components/BotCard'))
const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
const Tag = dynamic(() => import('@components/Tag'))
const Advertisement = dynamic(() => import('@components/Advertisement'))
const Tooltip = dynamic(() => import('@components/Tooltip'))
@ -83,11 +84,11 @@ const Users: NextPage<UserProps> = ({ data }) => {
</div>
<Divider />
<h2 className='mt-8 text-3xl font-bold'>제작한 봇</h2>
<div className='grid gap-x-4 mt-20 2xl:grid-cols-4 md:grid-cols-2'>
<ResponsiveGrid>
{(data.bots as Bot[]).map((bot: Bot) => (
<BotCard key={bot.id} bot={bot} />
))}
</div>
</ResponsiveGrid>
<Advertisement />
</Container>
)