@music-loopy/loops
Version:
A React component library for Music Loopy Applications and websites
50 lines • 2.5 kB
JavaScript
var _templateObject, _templateObject2;
function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import apple from './apple.svg';
import facebook from './facebook.svg';
import google from './google.svg';
import instagram from './instagram.svg';
import linkedin from './linkedin.svg';
import Icon from '../Icon';
var Container = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n border: 1px solid #f2f2f7;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: background-color 0.3s ease;\n &:hover {\n background-color: #f2f2f7;\n }\n svg {\n width: 36px;\n height: 36px;\n }\n"])));
var SocialBarContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 15px;\n flex-direction: ", ";\n align-items: center;\n justify-content: center;\n padding: 16px;\n background-color: ", ";\n border-radius: 12px;\n box-shadow: ", ";\n"])), function (props) {
return props.layout === 'vertical' ? 'column' : 'row';
}, function (props) {
return props.hasBackground ? props.theme.colors.lightcolor : 'transparent';
}, function (props) {
return props.hasBackground ? '0 2px 4px rgba(0, 0, 0, 0.1)' : 'none';
});
var IconBox = function IconBox(props) {
console.log(props);
return /*#__PURE__*/React.createElement(Container, props, /*#__PURE__*/React.createElement(Icon, {
name: props.type,
size: "2em",
fill: props.fill || 'dark'
}));
};
export var SocialBar = function SocialBar(_ref) {
var icons = _ref.icons,
_ref$layout = _ref.layout,
layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
hasBackground = _ref.hasBackground;
console.log('icons', icons);
return /*#__PURE__*/React.createElement(SocialBarContainer, {
layout: layout,
hasBackground: hasBackground
}, icons.map(function (icon) {
return /*#__PURE__*/React.createElement(IconBox, icon);
}));
};
SocialBar.propTypes = process.env.NODE_ENV !== "production" ? {
icons: PropTypes.arrayOf(PropTypes.shape({
type: PropTypes.oneOf(['apple', 'facebook', 'google', 'instagram', 'linkedin']).isRequired,
onClick: PropTypes.func
})).isRequired
} : {};
SocialBar.defaultProps = {
icons: []
};
export default SocialBar;