import React from 'react'
import { Badge, Link } from 'react-icecream'
import { AddThinIcon } from 'react-icecream/icons'

import { Gap, Squire, Circle } from './shapes'

export default function Demo() {
  return (
    <>
      <Badge ><Squire /></Badge>
      <Gap />
      <Badge count={5}> <Squire /> </Badge>
      <Gap />
      <Badge count={0}> <Squire /> </Badge>
      <Gap />
      <Badge count={100}> <Squire /> </Badge>
      <Gap />
      <Badge count={1001} overflowCount={999}> <Squire /> </Badge>
      <Gap />
      <Badge count={1119}> <Circle /> </Badge>
      <Gap />
      <Badge count={1119} overflowCount={999}> <Circle /> </Badge>
      <Gap />
      <Badge> <Circle /> </Badge>
      <div style={{ paddingTop: '10px' }}><br /></div>
      <Badge> <AddThinIcon style={{ fontSize: '20' }} /> </Badge>
      <Gap />
      <Badge> <Link href="/">文字链接</Link> </Badge>
    </>
  )
}