design-system-simplefi
Version:
Design System for SimpleFi Applications
47 lines • 2.79 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var _a;
import React, { useState } from 'react';
import styled, { css } from 'styled-components';
import { transparentize } from 'polished';
import { AvatarSize } from './Avatar.enums';
import { H3 } from '../typography/Heading';
var AvatarSt = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border-radius: 100%;\n display: flex;\n box-shadow: 0 2px 6px 0 ", ";\n ", "\n\n ", "\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n"], ["\n width: ", ";\n height: ", ";\n border-radius: 100%;\n display: flex;\n box-shadow: 0 2px 6px 0 ", ";\n ", "\n\n ", "\n\n img {\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n }\n"])), function (_a) {
var size = _a.size;
return size;
}, function (_a) {
var size = _a.size;
return size;
}, transparentize(0.85, '#000'), function (_a) {
var onClick = _a.onClick;
return !!onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "], ["\n cursor: pointer;\n &:hover {\n background: ", ";\n }\n "])), function (_a) {
var theme = _a.theme;
return theme.colors.lightGrey;
});
}, function (_a) {
var border = _a.border;
return border && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: 1px solid ", ";\n "], ["\n border: 1px solid ", ";\n "])), function (_a) {
var theme = _a.theme;
return theme.colors.black;
});
});
var SizeAvatar = (_a = {},
_a[AvatarSize.xl] = '70px',
_a[AvatarSize.lg] = '60px',
_a[AvatarSize.md] = '50px',
_a[AvatarSize.sm] = '40px',
_a);
var Avatar = function (_a) {
var logo = _a.logo, _b = _a.size, size = _b === void 0 ? 'lg' : _b, border = _a.border, onClick = _a.onClick, style = _a.style;
var _c = useState(logo), imgSrc = _c[0], setSrc = _c[1];
// todo add different chains backup
var onError = function () {
setSrc(null);
};
return (React.createElement(AvatarSt, { border: border, size: SizeAvatar[size], style: style, onClick: onClick }, imgSrc ? (React.createElement("img", { alt: "market-logo", src: imgSrc, onError: onError })) : (React.createElement(H3, { style: { margin: 'auto', color: 'grey' } }, "?"))));
};
export default Avatar;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=Avatar.js.map