import React from 'react'
import PropTypes from 'prop-types'
import styles from './ButtonIconAndLabel.module.scss'
const ButtonIconAndLabel = ({ label, icon }) => {
const iconClasses = ['dashicons', iconToDashIconMappings[icon], styles.icon]
if (label) {
iconClasses.push(styles.iconWithLabel)
}
return (
<>
{icon ? : null}
{label}
)
}
const iconToDashIconMappings = {
arrow: 'dashicons-arrow-right-alt2',
tick: 'dashicons-yes',
info: 'dashicons-info',
eye: 'dashicons-visibility',
cross: 'dashicons-dismiss',
update: 'dashicons-update',
updateSpinning: `dashicons-update ${styles.iconSpinning}`,
link: 'dashicons-external',
plus: 'dashicons-plus-alt',
trash: 'dashicons-trash',
download: 'dashicons-download',
expand: 'dashicons-editor-expand'
}
ButtonIconAndLabel.propTypes = {
label: PropTypes.string,
icon: PropTypes.oneOf(Object.keys(iconToDashIconMappings))
}
ButtonIconAndLabel.defaultProps = {
label: null,
icon: null
}
export default ButtonIconAndLabel
@keyframes headShake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}
.headShake {
animation-timing-function: ease-in-out;
animation-name: headShake;
}
Multifruta - Tienda HochSport
- Mostrar 15 Artículos por página
Desplazarse hacia arriba
