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

feat: linking Card only divider top

Browse Source
This commit is contained in:
Junseo Park 2021-02-15 11:32:40 +09:00
parent 47414d875e
commit 78627b4159
1 changed files with 65 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
components/BotCard.tsx
View File

@ -10,79 +10,82 @@ import DiscordAvatar from '@components/DiscordAvatar'
const BotCard = ({ manage=false, bot }: BotProps): JSX.Element => { const BotCard = ({ manage=false, bot }: BotProps): JSX.Element => {
return ( return (
<Link href={makeBotURL(bot)}>
<a className='container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'> <div className='container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in'>
<div className='relative'> <div className='relative'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='h-full'> <div className='h-full'>
<div className='relative mx-auto h-full text-black dark:text-white dark:bg-discord-black bg-little-white rounded-2xl shadow-xl' style={checkBotFlag(bot.flags, 'trusted') && bot.banner ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${bot.banner}") center top / cover no-repeat`, color: 'white' } : {}}> <div className='relative mx-auto h-full text-black dark:text-white dark:bg-discord-black bg-little-white rounded-2xl shadow-xl' style={checkBotFlag(bot.flags, 'trusted') && bot.banner ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${bot.banner}") center top / cover no-repeat`, color: 'white' } : {}}>
<div className='flex h-44'> <Link href={makeBotURL(bot)}>
<div className='w-2/3'> <a className='cursor-pointer'>
<div className='flex justify-start'> <div className='flex h-44'>
<DiscordAvatar size={128} userID={bot.id} alt='Avatar' className='rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white'/> <div className='w-2/3'>
</div> <div className='flex justify-start'>
<DiscordAvatar size={128} userID={bot.id} alt='Avatar' className='rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white'/>
</div>
<div className='mt-28 px-4'> <div className='mt-28 px-4'>
<h2 className='px-1 text-sm'> <h2 className='px-1 text-sm'>
<i className={`fas fa-circle text-${Status[bot.status]?.color}`} /> <i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
{Status[bot.status]?.text} {Status[bot.status]?.text}
</h2> </h2>
<h1 className='mb-3 text-left text-2xl font-bold truncate'> <h1 className='mb-3 text-left text-2xl font-bold truncate'>
{bot.name} {bot.name}
</h1> </h1>
</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={bot.servers ? <>{formatNumber(bot.servers)} 서버</> : 'N/A'} dark />
</div> </div>
</div> </div>
<div className='grid grid-cols-1 pr-5 py-5 w-1/3 h-0'> <p className='px-4 text-left text-gray-400 text-sm font-medium mb-10 h-6'>{bot.intro}</p>
<Tag <div className='category px-2 flex flex-wrap'>
text={ {bot.category.slice(0, 3).map(el => (
<> <Tag key={el} text={el} href={`/categories/${el}`} dark/>
<i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)} ))} {
</> bot.category.length > 3 && <Tag text={`+${bot.category.length - 3}`} dark />
} }
dark
/>
<Tag blurple text={bot.servers ? <>{formatNumber(bot.servers)} 서버</> : 'N/A'} dark />
</div> </div>
</div> </a>
<p className='px-4 text-left text-gray-400 text-sm font-medium mb-10 h-6'>{bot.intro}</p> </Link>
<div className='category px-2 flex flex-wrap'> <Divider />
{bot.category.slice(0, 3).map(el => ( <div className='flex justify-evenly'>
<Tag key={el} text={el} href={`/categories/${el}`} dark/> <Link
))} { href={makeBotURL(bot)}
bot.category.length > 3 && <Tag text={`+${bot.category.length - 3}`} dark /> >
} <a className='rounded-bl-2xl py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue hover:shadow-lg transition duration-100 ease-in'>
</div>
<Divider />
<div className='flex justify-evenly'>
<Link
href={makeBotURL(bot)}
>
<a className='rounded-bl-2xl py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue hover:shadow-lg transition duration-100 ease-in'>
보기 보기
</a>
</Link>
{
manage ? <Link href={`/manage/${bot.id}`}>
<a
className='rounded-br-2xl py-3 w-full text-center text-green-500 hover:text-white text-sm font-bold hover:bg-green-500 hover:shadow-lg transition duration-100 ease-in'
>
관리하기
</a>
</Link> : <Link href={bot.url || `https://discordapp.com/oauth2/authorize?client_id=${bot.id}&scope=bot&permissions=0`}>
<a rel='noopener noreferrer' target='_blank'
className='rounded-br-2xl py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple hover:shadow-lg transition duration-100 ease-in'
>
초대하기
</a> </a>
</Link> </Link>
{ }
manage ? <Link href={`/manage/${bot.id}`}>
<a
className='rounded-br-2xl py-3 w-full text-center text-green-500 hover:text-white text-sm font-bold hover:bg-green-500 hover:shadow-lg transition duration-100 ease-in'
>
관리하기
</a>
</Link> : <Link href={bot.url ?? `https://discordapp.com/oauth2/authorize?client_id=${bot.id}&scope=bot&permissions=0`}>
<a rel='noopener noreferrer' target='_blank'
className='rounded-br-2xl py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple hover:shadow-lg transition duration-100 ease-in'
>
초대하기
</a>
</Link>
}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</a> </div>
</Link> </div>
) )
} }