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

feat: added tag bigger prop

Browse Source
This commit is contained in:
원더 2021-01-29 21:55:13 +09:00
parent 87503a0cad
commit 4ab58a2327
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/Tag.tsx
View File

@ -9,14 +9,15 @@ const Tag = ({
circular = false, circular = false,
dark = false, dark = false,
marginBottom = 2, marginBottom = 2,
newTab = false newTab = false,
bigger = false
}: LabelProps): JSX.Element => { }: LabelProps): JSX.Element => {
return href ? newTab ? ( return href ? newTab ? (
<a <a
href={href} href={href}
rel='noopener noreferrer' rel='noopener noreferrer'
target='_blank' target='_blank'
className={`${className ?? ''} text-center text-base ${ className={`${className ?? ''} text-center text-base ${
dark dark
? blurple ? blurple
? 'bg-discord-blurple' ? 'bg-discord-blurple'
@ -25,7 +26,7 @@ const Tag = ({
? 'bg-gray-900 text-white' ? 'bg-gray-900 text-white'
: 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover' : 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover'
} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${ } ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1' circular ? `rounded-3xl ${bigger ? 'px-3.5 py-2.5' : 'px-2.5 py-1.5'}` : `rounded ${bigger ? 'px-3 py-2' : 'px-2 py-1'}`
} mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`} } mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`}
> >
{text} {text}
@ -43,7 +44,7 @@ const Tag = ({
? 'bg-gray-900 text-white' ? 'bg-gray-900 text-white'
: 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover' : 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover'
} ${!blurple && !github ? 'text-black dark:text-gray-400' : 'hover:bg-little-white-hover'} ${ } ${!blurple && !github ? 'text-black dark:text-gray-400' : 'hover:bg-little-white-hover'} ${
circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1' circular ? `rounded-3xl ${bigger ? 'px-3.5 py-2.5' : 'px-2.5 py-1.5'}` : `rounded ${bigger ? 'px-3 py-2' : 'px-2 py-1'}`
} mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`} } mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`}
> >
{text} {text}
@ -54,13 +55,13 @@ const Tag = ({
className={`${className ?? ''} text-center text-base ${ className={`${className ?? ''} text-center text-base ${
dark dark
? blurple ? blurple
? 'font-bg text-white bg-discord-blurple text-black' ? 'font-bg dark:text-white bg-discord-blurple text-black'
: github : github
? 'bg-gray-900 text-white' ? 'bg-gray-900 text-white'
: 'bg-little-white-hover dark:bg-very-black' : 'bg-little-white-hover dark:bg-very-black'
: 'bg-little-white dark:bg-discord-black' : 'bg-little-white dark:bg-discord-black'
} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${ } ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1' circular ? `rounded-3xl ${bigger ? 'px-3.5 py-2.5' : 'px-2.5 py-1.5'}` : `rounded ${bigger ? 'px-3 py-2' : 'px-2 py-1'}`
} mr-1 mb-${marginBottom}`} } mr-1 mb-${marginBottom}`}
> >
{text} {text}
@ -79,6 +80,7 @@ interface LabelProps {
dark?: boolean dark?: boolean
marginBottom?: number marginBottom?: number
newTab?: boolean newTab?: boolean
bigger?: boolean
} }
export default Tag export default Tag