feat: linking Card only divider top

This commit is contained in:
Junseo Park 2021-02-15 11:32:40 +09:00
parent 47414d875e
commit 78627b4159

View File

@ -10,12 +10,14 @@ import DiscordAvatar from '@components/DiscordAvatar'
const BotCard = ({ manage=false, bot }: BotProps): JSX.Element => {
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='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-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' } : {}}>
<Link href={makeBotURL(bot)}>
<a className='cursor-pointer'>
<div className='flex h-44'>
<div className='w-2/3'>
<div className='flex justify-start'>
@ -52,6 +54,8 @@ const BotCard = ({ manage=false, bot }: BotProps): JSX.Element => {
bot.category.length > 3 && <Tag text={`+${bot.category.length - 3}`} dark />
}
</div>
</a>
</Link>
<Divider />
<div className='flex justify-evenly'>
<Link
@ -68,7 +72,7 @@ const BotCard = ({ manage=false, bot }: BotProps): JSX.Element => {
>
</a>
</Link> : <Link href={bot.url ?? `https://discordapp.com/oauth2/authorize?client_id=${bot.id}&scope=bot&permissions=0`}>
</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'
>
@ -81,8 +85,7 @@ const BotCard = ({ manage=false, bot }: BotProps): JSX.Element => {
</div>
</div>
</div>
</a>
</Link>
</div>
)
}