mirror of
https://github.com/koreanbots/core.git
synced 2025-12-16 14:30:22 +00:00
feat: transparent background for banner
This commit is contained in:
원더
parent
edc21f569f
commit
a17473570f
@ -2,10 +2,10 @@ import Link from 'next/link'
|
|||||||
import Container from './Container'
|
import Container from './Container'
|
||||||
import Wave from './Wave'
|
import Wave from './Wave'
|
||||||
|
|
||||||
const Footer = (): JSX.Element => {
|
const Footer = ({ color }:FooterProps): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
<div className='releative'>
|
<div className='releative'>
|
||||||
<Wave color='currentColor' className='dark:text-discord-dark text-white bg-discord-black hidden md:block' />
|
<Wave color='currentColor' className={`${color ?? 'dark:text-discord-dark text-white bg-discord-black'} hidden md:block`} />
|
||||||
<div className='bottom-0 text-white bg-discord-black'>
|
<div className='bottom-0 text-white bg-discord-black'>
|
||||||
<Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-4/5' ignoreColor>
|
<Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-4/5' ignoreColor>
|
||||||
<div className='w-full md:w-2/5'>
|
<div className='w-full md:w-2/5'>
|
||||||
@ -78,4 +78,9 @@ const Footer = (): JSX.Element => {
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface FooterProps {
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
export default Footer
|
export default Footer
|
||||||
|
|||||||
@ -22,6 +22,7 @@ init()
|
|||||||
|
|
||||||
export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX.Element {
|
export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX.Element {
|
||||||
const [ betaKey, setBetaKey ] = useState('')
|
const [ betaKey, setBetaKey ] = useState('')
|
||||||
|
const [ footer, footerControl ] = useState(true)
|
||||||
const [ theme, setDefaultTheme ] = useState<string|undefined>(undefined)
|
const [ theme, setDefaultTheme ] = useState<string|undefined>(undefined)
|
||||||
let systemColor:string
|
let systemColor:string
|
||||||
|
|
||||||
@ -66,13 +67,15 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
|
|||||||
<Navbar />
|
<Navbar />
|
||||||
<div className='iu-is-the-best h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
|
<div className='iu-is-the-best h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
|
||||||
{
|
{
|
||||||
process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ? <Component {...pageProps} err={err} /> : <div className='text-center py-40 px-10'>
|
process.env.NEXT_PUBLIC_TESTER_KEY === Crypto.createHmac('sha256', betaKey ?? '').digest('hex') ? <Component {...pageProps} err={err} footerControl={footerControl} /> : <div className='text-center py-40 px-10'>
|
||||||
<h1 className='text-3xl font-bold'>주어진 테스터키를 입력해주세요.</h1><br/>
|
<h1 className='text-3xl font-bold'>주어진 테스터키를 입력해주세요.</h1><br/>
|
||||||
<input value={betaKey} name='field_name' className='text-black border outline-none px-4 py-2 rounded-2xl' type='text' placeholder='테스터 키' onChange={(e)=> { localStorage.setItem('betaKey', e.target.value); setBetaKey(e.target.value) }} />
|
<input value={betaKey} name='field_name' className='text-black border outline-none px-4 py-2 rounded-2xl' type='text' placeholder='테스터 키' onChange={(e)=> { localStorage.setItem('betaKey', e.target.value); setBetaKey(e.target.value) }} />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
{
|
||||||
|
footer && <Footer />
|
||||||
|
}
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import Day from '@utils/Day'
|
|||||||
import { checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
|
import { checkBotFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
|
||||||
|
|
||||||
import NotFound from '../404'
|
import NotFound from '../404'
|
||||||
|
import Footer from '@components/Footer'
|
||||||
|
|
||||||
const Container = dynamic(() => import('@components/Container'))
|
const Container = dynamic(() => import('@components/Container'))
|
||||||
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
|
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
|
||||||
@ -26,176 +27,181 @@ const Advertisement = dynamic(() => import('@components/Advertisement'))
|
|||||||
const Tooltip = dynamic(() => import('@components/Tooltip'))
|
const Tooltip = dynamic(() => import('@components/Tooltip'))
|
||||||
const Markdown = dynamic(() => import ('@components/Markdown'))
|
const Markdown = dynamic(() => import ('@components/Markdown'))
|
||||||
|
|
||||||
const Bots: NextPage<BotsProps> = ({ data, date, user }) => {
|
const Bots: NextPage<BotsProps> = ({ data, date, user, footerControl }) => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
if (!data || !data.id) return <NotFound />
|
if (!data || !data.id) return <NotFound />
|
||||||
if(data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}`)
|
if(data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}`)
|
||||||
return <Container paddingTop className='py-10'>
|
else footerControl(false)
|
||||||
<SEO
|
return <div style={checkBotFlag(data.flags, 'trusted') && data.banner ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed` } : {}}>
|
||||||
title={data.name}
|
<Container paddingTop className='py-10'>
|
||||||
description={data.intro}
|
<SEO
|
||||||
image={
|
title={data.name}
|
||||||
data.avatar
|
description={data.intro}
|
||||||
? `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.png?size=1024`
|
image={
|
||||||
: `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024`
|
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 w-full'>
|
}
|
||||||
<div className='w-full text-center lg:w-1/4'>
|
/>
|
||||||
<DiscordAvatar
|
<div className='lg:flex w-full'>
|
||||||
userID={data.id}
|
<div className='w-full text-center lg:w-1/4'>
|
||||||
className='w-full'
|
<DiscordAvatar
|
||||||
/>
|
userID={data.id}
|
||||||
</div>
|
className='w-full'
|
||||||
<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}{' '}
|
|
||||||
{checkBotFlag(data.flags, 'trusted') ? (
|
|
||||||
<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
|
|
||||||
<span className='text-koreanbots-blue text-3xl'>
|
|
||||||
<i className='fas fa-award' />
|
|
||||||
</span>
|
|
||||||
</Tooltip>
|
|
||||||
) : ''}
|
|
||||||
</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<p className='dark:text-gray-300 text-gray-800 text-base'>{data.intro}</p>
|
<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
|
||||||
</div>
|
<div>
|
||||||
<div className='w-full lg:w-1/4 lg:pt-10'>
|
<Tag
|
||||||
<LongButton
|
circular
|
||||||
newTab
|
text={
|
||||||
href={
|
<>
|
||||||
data.url ??
|
<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}{' '}
|
||||||
|
{checkBotFlag(data.flags, 'trusted') ? (
|
||||||
|
<Tooltip text='해당봇은 한국 디스코드봇 리스트에서 엄격한 기준을 통과한 봇입니다!' direction='left' size='large' href='/verification'>
|
||||||
|
<span className='text-koreanbots-blue text-3xl'>
|
||||||
|
<i className='fas fa-award' />
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
) : ''}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<p className='dark:text-gray-300 text-gray-800 text-base'>{data.intro}</p>
|
||||||
|
</div>
|
||||||
|
<div className='w-full lg:w-1/4 lg:pt-10'>
|
||||||
|
<LongButton
|
||||||
|
newTab
|
||||||
|
href={
|
||||||
|
data.url ??
|
||||||
`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
|
`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<h4 className='whitespace-nowrap'>
|
<h4 className='whitespace-nowrap'>
|
||||||
<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
|
<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
|
||||||
</h4>
|
|
||||||
</LongButton>
|
|
||||||
<LongButton href={`/bots/${router.query.id}/vote`}>
|
|
||||||
<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'>
|
|
||||||
{formatNumber(data.votes)}
|
|
||||||
</span>
|
|
||||||
</LongButton>
|
|
||||||
{
|
|
||||||
((data.owners as User[]).find(el => el.id === user.id) || checkUserFlag(user.flags, 'staff')) && <LongButton href={`/manage/${data.id}`}>
|
|
||||||
<h4>
|
|
||||||
<i className='fas fa-cogs' /> 관리하기
|
|
||||||
</h4>
|
</h4>
|
||||||
</LongButton>
|
</LongButton>
|
||||||
}
|
<LongButton href={`/bots/${router.query.id}/vote`}>
|
||||||
</div>
|
<h4>
|
||||||
</div>
|
<i className='fas fa-heart text-red-600' /> 하트 추가
|
||||||
<Divider className='px-5' />
|
</h4>
|
||||||
<div className='lg:flex lg:flex-row-reverse'>
|
<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'>
|
||||||
<div className='mb-1 w-full lg:w-1/4'>
|
{formatNumber(data.votes)}
|
||||||
<h2 className='3xl mb-2 font-bold'>정보</h2>
|
</span>
|
||||||
<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 rounded-sm'>
|
</LongButton>
|
||||||
<div>
|
|
||||||
<i className='far fa-flag' /> 접두사
|
|
||||||
</div>
|
|
||||||
<div className='markdown-body text-black dark:text-gray-400'>
|
|
||||||
<code>{data.prefix}</code>
|
|
||||||
</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>
|
|
||||||
{
|
{
|
||||||
checkBotFlag(data.flags, 'trusted') ?
|
((data.owners as User[]).find(el => el.id === user.id) || checkUserFlag(user.flags, 'staff')) && <LongButton href={`/manage/${data.id}`}>
|
||||||
<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
|
<h4>
|
||||||
<div>
|
<i className='fas fa-cogs' /> 관리하기
|
||||||
<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
|
</h4>
|
||||||
</div>
|
</LongButton>
|
||||||
</Tooltip>
|
|
||||||
: ''
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
|
</div>
|
||||||
<div className='flex flex-wrap'>
|
<Divider className='px-5' />
|
||||||
{data.category.map(el => (
|
<div className='lg:flex lg:flex-row-reverse'>
|
||||||
<Tag key={el} text={el} href={`/categories/${el}`} />
|
<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 rounded-sm'>
|
||||||
|
<div>
|
||||||
|
<i className='far fa-flag' /> 접두사
|
||||||
|
</div>
|
||||||
|
<div className='markdown-body text-black dark:text-gray-400'>
|
||||||
|
<code>{data.prefix}</code>
|
||||||
|
</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>
|
||||||
|
{
|
||||||
|
checkBotFlag(data.flags, 'trusted') ?
|
||||||
|
<Tooltip direction='left' text='해당 봇은 디스코드측에서 인증된 봇입니다.'>
|
||||||
|
<div>
|
||||||
|
<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
</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}
|
||||||
|
username={el.username}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
<div className='list grid'>
|
||||||
<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
|
<Link href={`/bots/${data.id}/report`}>
|
||||||
{(data.owners as User[]).map(el => (
|
<a className='text-red-600 hover:underline'>
|
||||||
<Owner
|
<i className='far fa-flag' />
|
||||||
key={el.id}
|
|
||||||
id={el.id}
|
|
||||||
tag={el.tag}
|
|
||||||
username={el.username}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<div className='list grid'>
|
|
||||||
<Link href={`/bots/${data.id}/report`}>
|
|
||||||
<a className='text-red-600 hover:underline'>
|
|
||||||
<i className='far fa-flag' />
|
|
||||||
신고하기
|
신고하기
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
{data.discord && (
|
{data.discord && (
|
||||||
<a
|
<a
|
||||||
rel='noopener noreferrer'
|
rel='noopener noreferrer'
|
||||||
target='_blank'
|
target='_blank'
|
||||||
className='text-discord-blurple hover:underline'
|
className='text-discord-blurple hover:underline'
|
||||||
href={`https://discord.gg/${data.discord}`}
|
href={`https://discord.gg/${data.discord}`}
|
||||||
>
|
>
|
||||||
<i className='fab fa-discord' />
|
<i className='fab fa-discord' />
|
||||||
디스코드 서버
|
디스코드 서버
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
{data.web && (
|
{data.web && (
|
||||||
<a
|
<a
|
||||||
rel='noopener noreferrer'
|
rel='noopener noreferrer'
|
||||||
target='_blank'
|
target='_blank'
|
||||||
className='text-blue-500 hover:underline'
|
className='text-blue-500 hover:underline'
|
||||||
href={data.web}
|
href={data.web}
|
||||||
>
|
>
|
||||||
<i className='fas fa-globe' />
|
<i className='fas fa-globe' />
|
||||||
웹사이트
|
웹사이트
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
{data.git && (
|
{data.git && (
|
||||||
<a
|
<a
|
||||||
rel='noopener noreferrer'
|
rel='noopener noreferrer'
|
||||||
target='_blank'
|
target='_blank'
|
||||||
className='hover:underline'
|
className='hover:underline'
|
||||||
href={data.git}
|
href={data.git}
|
||||||
>
|
>
|
||||||
<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
|
<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
|
||||||
{git?.[new URL(data.git).hostname].text ?? 'Git'}
|
{git?.[new URL(data.git).hostname].text ?? 'Git'}
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
<Advertisement />
|
||||||
|
</div>
|
||||||
|
<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
|
||||||
|
<Advertisement />
|
||||||
|
<Segment>
|
||||||
|
<Markdown text={data.desc}/>
|
||||||
|
</Segment>
|
||||||
|
<Advertisement />
|
||||||
</div>
|
</div>
|
||||||
<Advertisement />
|
|
||||||
</div>
|
</div>
|
||||||
<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
|
</Container>
|
||||||
<Advertisement />
|
|
||||||
<Segment>
|
<Footer color='bg-transparent dark:text-discord-black text-white hidden md:block transform rotate-180'/>
|
||||||
<Markdown text={data.desc}/>
|
</div>
|
||||||
</Segment>
|
|
||||||
<Advertisement />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Container>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getServerSideProps = async (ctx: Context) => {
|
export const getServerSideProps = async (ctx: Context) => {
|
||||||
@ -217,6 +223,7 @@ interface BotsProps {
|
|||||||
data: Bot
|
data: Bot
|
||||||
date: Date
|
date: Date
|
||||||
user: User
|
user: User
|
||||||
|
footerControl(val: boolean): void
|
||||||
}
|
}
|
||||||
interface Context extends NextPageContext {
|
interface Context extends NextPageContext {
|
||||||
query: URLQuery
|
query: URLQuery
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user