alchemy-tech-ui/dist/components/NavLink.mjs

react component library for alchemy apps

import { __makeTemplateObject } from 'tslib';
import styled from 'styled-components';
import React from 'react';
import colors from '../colors.mjs';

var StyledLink = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: bold;\n  color: black;\n  padding: 8px;\n  transition: all 0.2s ease-in-out;\n\n  :hover {\n    background-color: ", ";\n    border-radius: 4px: \n  }\n  ", "\n"], ["\n  font-weight: bold;\n  color: black;\n  padding: 8px;\n  transition: all 0.2s ease-in-out;\n\n  :hover {\n    background-color: ", ";\n    border-radius: 4px: \n  }\n  ", "\n"])), colors.gray["100"], function(_a) {
  var active = _a.active;
  return active ? "\n    text-decoration: underline;\n    text-decoration-thickness: 2px;\n    text-underline-offset: 6px;\n    " : "";
});
function NavLink(_a) {
  var text = _a.text, _b = _a.active, active = _b === void 0 ? false : _b, onClick = _a.onClick, className = _a.className;
  return React.createElement(StyledLink, { active: active, onClick: onClick, className: className }, text);
}
var templateObject_1;

export { NavLink as default };