eventx-design-system/dist/components/Tag/Tag.js

Design System do EventX

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { colors, borderRadius, typography, spacing } from '../../tokens/design-tokens';
const TagContainer = styled.span `
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: ${borderRadius.full};
  font-family: ${typography.fontFamily.primary};
  font-weight: ${typography.fontWeight.medium};
  cursor: default;
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;

  ${({ size }) => {
    switch (size) {
        case 'small':
            return `
          padding: ${spacing[1]} ${spacing[2]};
          font-size: ${typography.fontSize.xs};
          line-height: ${typography.lineHeight.tight};
        `;
        case 'medium':
            return `
          padding: ${spacing[2]} ${spacing[3]};
          font-size: ${typography.fontSize.sm};
          line-height: ${typography.lineHeight.normal};
        `;
        case 'large':
            return `
          padding: ${spacing[3]} ${spacing[4]};
          font-size: ${typography.fontSize.base};
          line-height: ${typography.lineHeight.normal};
        `;
        default:
            return `
          padding: ${spacing[2]} ${spacing[3]};
          font-size: ${typography.fontSize.sm};
          line-height: ${typography.lineHeight.normal};
        `;
    }
}}

  ${({ variant, outlined }) => {
    if (outlined) {
        switch (variant) {
            case 'default':
                return `
            background-color: transparent;
            color: ${colors.brand.primary[500]};
            border-color: ${colors.brand.primary[500]};
          `;
            case 'success':
                return `
            background-color: transparent;
            color: ${colors.semantic.success[500]};
            border-color: ${colors.semantic.success[500]};
          `;
            case 'warning':
                return `
            background-color: transparent;
            color: ${colors.semantic.warning[500]};
            border-color: ${colors.semantic.warning[500]};
          `;
            case 'error':
                return `
            background-color: transparent;
            color: ${colors.semantic.error[500]};
            border-color: ${colors.semantic.error[500]};
          `;
            case 'info':
                return `
            background-color: transparent;
            color: ${colors.semantic.info[500]};
            border-color: ${colors.semantic.info[500]};
          `;
            default:
                return `
            background-color: transparent;
            color: ${colors.brand.primary[500]};
            border-color: ${colors.brand.primary[500]};
          `;
        }
    }
    else {
        switch (variant) {
            case 'default':
                return `
            background-color: ${colors.brand.primary[100]};
            color: ${colors.brand.primary[600]};
            border-color: ${colors.brand.primary[200]};
          `;
            case 'success':
                return `
            background-color: ${colors.semantic.success[100]};
            color: ${colors.semantic.success[600]};
            border-color: ${colors.semantic.success[100]};
          `;
            case 'warning':
                return `
            background-color: ${colors.semantic.warning[100]};
            color: ${colors.semantic.warning[600]};
            border-color: ${colors.semantic.warning[100]};
          `;
            case 'error':
                return `
            background-color: ${colors.semantic.error[100]};
            color: ${colors.semantic.error[600]};
            border-color: ${colors.semantic.error[100]};
          `;
            case 'info':
                return `
            background-color: ${colors.semantic.info[100]};
            color: ${colors.semantic.info[600]};
            border-color: ${colors.semantic.info[100]};
          `;
            default:
                return `
            background-color: ${colors.brand.primary[100]};
            color: ${colors.brand.primary[600]};
            border-color: ${colors.brand.primary[200]};
          `;
        }
    }
}}

  &:hover {
    ${({ outlined }) => !outlined && `
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    `}
  }
`;
const TagIcon = styled.span `
  margin-right: ${spacing[1]};
  display: flex;
  align-items: center;
`;
export const Tag = ({ children, variant = 'default', size = 'medium', outlined = false, icon, className, onClick, }) => {
    return (_jsxs(TagContainer, { variant: variant, size: size, outlined: outlined, className: className, onClick: onClick, style: { cursor: onClick ? 'pointer' : 'default' }, children: [icon && _jsx(TagIcon, { children: icon }), children] }));
};