nice-ui/lib/2-inline-block/PillButton/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PillButton = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const Link_1 = require("../../1-inline/Link");
const blockClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.ui2.bold,
    fz: '17.6px',
    col: nano_theme_1.theme.g(0.4),
    pd: '9px 18px 8px',
    mr: '0 2px',
    bdrad: '16px',
    bg: 'transparent',
    bd: 0,
    svg: {
        fill: nano_theme_1.theme.g(0.4),
    },
    '&:hover': {
        col: nano_theme_1.theme.g(0),
        svg: {
            fill: nano_theme_1.theme.g(0),
        },
    },
});
const activeClass = (0, nano_theme_1.rule)({
    col: nano_theme_1.theme.color.sem.blue[0],
    bg: 'rgba(0,128,255,.04)',
    svg: {
        fill: nano_theme_1.theme.blue,
    },
    '&:hover': {
        col: nano_theme_1.theme.blue,
        svg: {
            fill: nano_theme_1.theme.blue,
        },
    },
});
const PillButton = ({ active, children, ...rest }) => {
    return (React.createElement(Link_1.Link, { className: blockClass + (active ? activeClass : ''), ...rest }, children));
};
exports.PillButton = PillButton;