feat: added center props

This commit is contained in:
원더 2021-01-09 21:53:08 +09:00
parent 40d79be33d
commit 2b05b6f7a8

View File

@ -1,17 +1,17 @@
/* eslint-disable jsx-a11y/no-static-element-interactions */ /* eslint-disable jsx-a11y/no-static-element-interactions */
import Link from 'next/link' import Link from 'next/link'
const LongButton = ({ children, href, onClick }:LongButtonProps):JSX.Element => { const LongButton = ({ children, href, onClick, center=false }:LongButtonProps):JSX.Element => {
if(href) return <Link href={href}> if(href) return <Link href={href}>
<div className="text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1"> <div className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
{children} {children}
</div> </div>
</Link> </Link>
if(onClick) return <div onKeyDown={onClick} onClick={onClick} className="text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1"> if(onClick) return <div onKeyDown={onClick} onClick={onClick} className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
{children} {children}
</div> </div>
return <div className="text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1"> return <div className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
{children} {children}
</div> </div>
@ -25,4 +25,5 @@ interface LongButtonProps {
onClick?: (event: React.KeyboardEvent<HTMLDivElement>|React.MouseEvent<HTMLDivElement>) => void onClick?: (event: React.KeyboardEvent<HTMLDivElement>|React.MouseEvent<HTMLDivElement>) => void
children: JSX.Element | JSX.Element[] children: JSX.Element | JSX.Element[]
href?: string href?: string
center?: boolean
} }