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

feat: added props

Browse Source
This commit is contained in:
원더 2021-01-08 22:19:10 +09:00
parent 9a5b6522ed
commit 07f2ee6966
1 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/Tag.tsx
View File

@ -1,18 +1,62 @@
import Link from 'next/link'
const Tag = ({ href, text, circular=false, dark=false, marginBottom=2 }:LabelProps):JSX.Element => {
return href ? <Link href={href}>
<a className={`text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 ${circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'} mr-1 mb-${marginBottom} hover:bg-little-white-hover dark:hover:bg-discord-dark-hover`}>{text}</a>
</Link> : <a className={`text-base ${dark ? 'bg-little-white-hover dark:bg-very-black' : 'bg-little-white dark:bg-discord-black'} text-black dark:text-gray-400 ${circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'} mr-1 mb-${marginBottom}`}>{text}</a>
const Tag = ({
blurple = false,
github = false,
href,
text,
className,
circular = false,
dark = false,
marginBottom = 2,
}: LabelProps): JSX.Element => {
return href ? (
<Link href={href}>
<a
className={`${className ?? ''} text-center text-base ${
dark
? blurple
? 'bg-discord-blurple'
: 'bg-little-white-hover dark:bg-very-black'
: github
? 'bg-gray-900 text-white'
: 'bg-little-white dark:bg-discord-black'
} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'
} mr-1 mb-${marginBottom} hover:bg-little-white-hover dark:hover:bg-discord-dark-hover`}
>
{text}
</a>
</Link>
) : (
<a
className={`${className ?? ''} text-center text-base ${
dark
? blurple
? 'font-bg text-white bg-discord-blurple text-black'
: github
? 'bg-gray-900 text-white'
: 'bg-little-white-hover dark:bg-very-black'
: 'bg-little-white dark:bg-discord-black'
} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
circular ? 'rounded-3xl px-2.5 py-1.5' : 'rounded px-2 py-1'
} mr-1 mb-${marginBottom}`}
>
{text}
</a>
)
}
interface LabelProps {
href?: string
text: string | JSX.Element | JSX.Element[]
icon?: string
circular?: boolean
dark?: boolean
marginBottom?: number
blurple?: boolean
github?: boolean
href?: string
text: string | JSX.Element | JSX.Element[]
className?: string
icon?: string
circular?: boolean
dark?: boolean
marginBottom?: number
}
export default Tag
export default Tag