one-product-system-13.tsx

import React, { useMemo } from 'react';
import { variant } from 'styled-system';
import styled from '@emotion/styled';
import { skipForwardProps } from '../../props';
import { kindVariants as textKindVariants } from '../../private/BaseText';
import { Box } from '../../private/Box';
import { Icon } from '../Media/Icon';

const kindVariants = {
  fill: {
    backgroundColor: 'gray.100',
    '&:hover': {
      backgroundColor: 'gray.200',
    },
  },
  outline: {
    backgroundColor: 'white',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'gray.300',
    '&:hover': {
      backgroundColor: 'gray.200',
    },
  },
} as const;

const sizeVariants = {
  sm: {
    paddingX: 12,
    paddingY: 6,
    ...textKindVariants.body3,
  },
  md: {
    paddingX: 16,
    paddingY: 10,
    ...textKindVariants.body2,
  },
} as const;

type KindVariant = keyof typeof kindVariants;
type SizeVariant = keyof typeof sizeVariants;

export type ChipProps = {
  label: string;
  kind?: KindVariant;
  size?: SizeVariant;
  action?: 'delete' | 'add';
  onAction?: () => void;
};

export const Chip: React.FC<ChipProps> = styled((props: ChipProps) => {
  const { label, action, onAction, ...props } = props;

  const ActionIcon = useMemo(() => {
    switch (action) {
      case 'delete':
        return Icon.Thin.Close;
      case 'add':
        return Icon.Thin.Add;
      default:
        return () => null;
    }
  }, [action]);

  return (
    <Box {...props} display="inline-flex" alignItems="center" borderRadius={24}>
      {label}
      {action && (
        <Box
          as="button"
          ml={4}
          p={0}
          lineHeight={0}
          background="none"
          border="none"
          cursor="pointer"
          onClick={onAction}
        >
          <ActionIcon size={14} fill="black" />
        </Box>
      )}
    </Box>
  );
}, skipForwardProps(['kind', 'size']))(
  variant({
    prop: 'kind',
    variants: kindVariants,
  }),
  variant({
    prop: 'size',
    variants: sizeVariants,
  })
);

Chip.defaultProps = {
  kind: 'fill',
  size: 'sm',
};