2020-11-25 19:17:12 +01:00
|
|
|
/* Example with @emotion/react */
|
|
|
|
import xw, { cx } from 'xwind'
|
2020-04-25 01:27:43 +02:00
|
|
|
|
|
|
|
//"react native style"
|
|
|
|
const styles = {
|
2020-11-25 19:17:12 +01:00
|
|
|
button: xw`
|
2020-04-25 01:27:43 +02:00
|
|
|
relative
|
|
|
|
w-64 min-w-full
|
|
|
|
flex justify-center
|
|
|
|
py-2 px-4
|
|
|
|
border border-transparent
|
|
|
|
text-sm leading-5 font-medium
|
|
|
|
rounded-md
|
|
|
|
text-white
|
2020-11-25 19:17:12 +01:00
|
|
|
bg-gray-600
|
|
|
|
hover:bg-gray-500
|
|
|
|
focus[outline-none ring-4 ring-gray-400]
|
|
|
|
active:bg-gray-700
|
2020-04-25 01:27:43 +02:00
|
|
|
transition duration-150 ease-in-out
|
|
|
|
`,
|
|
|
|
}
|
|
|
|
|
|
|
|
const ButtonReact = ({ className, children, ...props }) => (
|
2020-11-25 19:17:12 +01:00
|
|
|
<button {...props} css={styles.button} className={cx('group', className)}>
|
|
|
|
{/* inline style*/}
|
|
|
|
<span css={xw`absolute left-0 inset-y-0 flex items-center pl-3`}>
|
2020-04-25 01:27:43 +02:00
|
|
|
<svg
|
2020-11-25 19:17:12 +01:00
|
|
|
css={xw`h-5 w-5 text-gray-500 group-hover:text-gray-400 transition ease-in-out duration-150`}
|
2020-04-25 01:27:43 +02:00
|
|
|
fill="currentColor"
|
|
|
|
viewBox="0 0 20 20"
|
|
|
|
>
|
|
|
|
<path
|
|
|
|
fillRule="evenodd"
|
|
|
|
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
|
|
|
|
clipRule="evenodd"
|
|
|
|
/>
|
|
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
{children}
|
|
|
|
</button>
|
|
|
|
)
|
|
|
|
|
|
|
|
export default ButtonReact
|