import React from 'react'
import { Tag } from 'react-icecream'

export default function Demo() {
  return (
    <>
      <Tag>热门</Tag>
      <Gap />
      <Tag closable onClose={() => alert('closed')}>热门</Tag>
      <Gap />
      <Tag color="blue">蓝色</Tag>
      <Gap />
      <Tag color="blue" closable>蓝色</Tag>
      <Gap />
      <Tag color="cobalt">钴蓝色</Tag>
      <Gap />
      <Tag color="cyan">青色</Tag>
      <Gap />
      <Tag color="green">绿色</Tag>
      <Gap />
      <Tag color="grey">灰色</Tag>
      <Gap />
      <Tag color="grey" closable>灰色</Tag>
      <Gap />
      <Tag color="lemon">柠檬色</Tag>
      <Gap />
      <Tag color="magenta">品红色</Tag>
      <Gap />
      <Tag color="olivine">黄绿色</Tag>
      <Gap />
      <Tag color="orange-red">橙红</Tag>
      <Gap />
      <Tag color="orange">橙色</Tag>
      <Gap />
      <Tag color="purple">紫色</Tag>
      <Gap />
      <Tag color="red">红色</Tag>
      <Gap />
      <Tag color="yellow">黄色</Tag>
    </>
  )
}

function Gap() {
  return <div style={{ display: 'inline-block', width: '8px' }} />
}