design-system-simplefi
Version:
Design System for SimpleFi Applications
32 lines • 2.48 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;
};
import React from 'react';
import styled from 'styled-components';
import { ButtonVariants } from '../../Button/Button.enums';
import { Button } from '../../Button';
import { getColor, getFontWeight, getLineHeight, pxToRem, } from '../../../utils';
import { FlexContainer } from '../../layout';
var NavButton = styled(Button)
.attrs(function () { return ({
variant: ButtonVariants.text,
}); })
.withConfig({
shouldForwardProp: function (prop) { return prop !== 'isActive'; },
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n cursor: pointer;\n color: ", ";\n transition: color 0.1s ease-in;\n text-transform: capitalize;\n text-align: left;\n justify-content: left;\n\n &:hover {\n color: ", ";\n transition: color 0.1s ease-in;\n }\n"], ["\n width: 100%;\n height: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n cursor: pointer;\n color: ", ";\n transition: color 0.1s ease-in;\n text-transform: capitalize;\n text-align: left;\n justify-content: left;\n\n &:hover {\n color: ", ";\n transition: color 0.1s ease-in;\n }\n"])), pxToRem(34), pxToRem(24), function (_a) {
var isActive = _a.isActive;
return isActive ? getFontWeight('bold') : getFontWeight('medium');
}, getLineHeight('lg'), function (_a) {
var isActive = _a.isActive;
return getColor(isActive ? 'lightestGrey' : 'midPurple');
}, getColor('deepPurple'));
var NavigationContainerSt = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: min-content;\n width: 190px;\n"], ["\n height: min-content;\n width: 190px;\n"])));
var Navigation = function (_a) {
var currentUrl = _a.currentUrl, links = _a.links, onClose = _a.onClose;
return (React.createElement(NavigationContainerSt, null,
React.createElement(FlexContainer, { flexDirection: "column" }, links.map(function (link) { return (React.createElement(NavButton, { key: link.label, isActive: currentUrl === link.url, to: link.url, onClick: onClose }, link.label)); }))));
};
export default Navigation;
var templateObject_1, templateObject_2;
//# sourceMappingURL=Navigation.js.map