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 buttons

Browse Source
This commit is contained in:
원더 2021-01-09 13:06:55 +09:00
parent de741c8977
commit 12856d7993
1 changed files with 74 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
components/BotCard.tsx
View File

@ -3,44 +3,92 @@ import { formatNumber } from '../utils/Tools'
import { Status } from '../utils/Constants'
import Divider from './Divider'
import Tag from './Tag'
import Link from 'next/link'
const BotCard = ({ bot }:BotProps):JSX.Element => {
return <div className='container mb-20'>
<div className="relative h-80">
<div className="container mx-auto h-full">
<div className='h-full'>
const BotCard = ({ bot }: BotProps): JSX.Element => {
console.log(`${bot.vanity}`)
return (
<div className="container mb-20">
<div className="relative">
<div className="container mx-auto">
<div className="h-full">
<div className="relative mx-auto h-full text-black dark:text-white dark:bg-discord-black bg-little-white rounded-sm shadow-xl">
<div className="flex mb-16 h-48">
<div className="w-2/3">
<div className="flex justify-start">
<img
alt="Avatar"
src={
bot.avatar
? `https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}.png?size=1024`
: `https://cdn.discordapp.com/embed/avatars/${Number(bot.tag) %
5}.png?size=1024`
}
className="absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white"
/>
</div>
<div className="flex bg-little-white dark:bg-discord-black text-black dark:text-white rounded-sm relative shadow-xl mx-auto h-full">
<div className='w-2/3'>
<div className="flex justify-start">
<img src={bot.avatar ? `https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}.png?size=1024` : `https://cdn.discordapp.com/embed/avatars/${Number(bot.tag) % 5}.png?size=1024`} alt="" className="mx-auto absolute -top-16 -left-2 w-32 h-32 bg-white" />
<div className="mt-28 px-4">
<h2 className="px-1 text-sm">
<i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
{Status[bot.status]?.text}
</h2>
<h1 className="mb-3 text-left text-3xl font-bold">
{bot.name}{' '}
{bot.trusted && (
<span className="text-koreanbots-blue text-3xl">
<i className="fas fa-award" />
</span>
)}
</h1>
<p className="text-left text-gray-400 text-sm font-medium">{bot.intro}</p>
</div>
</div>
<div className="grid grid-cols-1 pr-5 py-5 w-1/3 h-0">
<Tag
text={
<>
<i className="fas fa-heart text-red-600" /> {formatNumber(bot.votes)}
</>
}
dark
/>
<Tag blurple text={<>{formatNumber(bot.servers)} 서버</>} dark />
</div>
</div>
<div className="mt-20 px-4">
<h2 className='px-1 text-sm'><i className={`fas fa-circle text-${Status[bot.status]?.color}`}/>{Status[bot.status]?.text}</h2>
<h1 className="font-bold text-left text-3xl mb-3">{bot.name} {bot.trusted && <span className='text-green-500 text-3xl'><i className='fas fa-award' /></span>}</h1>
<p className="text-left text-sm text-gray-400 font-medium">{bot.intro}</p>
{/* <div className="flex justify-evenly my-5">
<a href="" className="bg font-bold text-sm text-blue-800 w-full text-center py-3 hover:bg-blue-800 hover:text-white hover:shadow-lg">Facebook</a>
<a href="" className="bg font-bold text-sm text-blue-400 w-full text-center py-3 hover:bg-blue-400 hover:text-white hover:shadow-lg">Twitter</a>
<a href="" className="bg font-bold text-sm text-yellow-600 w-full text-center py-3 hover:bg-yellow-600 hover:text-white hover:shadow-lg">Instagram</a>
<a href="" className="bg font-bold text-sm text-gray-600 w-full text-center py-3 hover:bg-gray-600 hover:text-white hover:shadow-lg">Email</a>
</div> */}
<div className="category">
{bot.category.slice(5).map(el => (
<Tag key={el} text={el} href={`/categories/${el}`} />
))}
</div>
<Divider />
<div className="flex justify-evenly">
<Link
href={`/bots/${
(bot.partnered || bot.trusted) && bot.vanity ? bot.vanity : bot.id
}`}
>
<a className="bg py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue hover:shadow-lg">
보기
</a>
</Link>
<a
href="#"
className="bg py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple hover:shadow-lg"
>
초대하기
</a>
</div>
</div>
<div className='grid grid-cols-1 w-1/3 py-5 h-0 pr-5'>
<Tag text={<><i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)}</>} dark/>
<Tag blurple text={<>{formatNumber(bot.servers)} 서버</>} dark/>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
interface BotProps {
bot: Bot
bot: Bot
}
export default BotCard