import { BfBadge } from '@bud-fe/react-taro-ui';
import { Button, Text, View } from '@tarojs/components';
import React from 'react';

export default () => {
  return (
    <>
      <View className="group-title">基础用法</View>
      <BfBadge value={5}>
        <Button>按钮</Button>
      </BfBadge>
      <BfBadge value={10}>
        <Button>按钮</Button>
      </BfBadge>
      <BfBadge value="hot">
        <Button>按钮</Button>
      </BfBadge>

      <View className="group-title">小红点</View>
      <BfBadge dot>
        <Button>按钮</Button>
      </BfBadge>

      <View className="group-title">最大值</View>
      <BfBadge value={50} maxValue={20}>
        <Button>按钮</Button>
      </BfBadge>

      <View className="group-title">自定义颜色</View>
      <BfBadge value={76} color="blue">
        <Button>按钮</Button>
      </BfBadge>
      <BfBadge value="NEW" color="blue">
        <Button>按钮</Button>
      </BfBadge>

      <View className="group-title">自定义内容</View>
      <BfBadge color="black" content={<Text style={{ color: 'cyan' }}>123</Text>}>
        <Button>按钮</Button>
      </BfBadge>

      <View className="group-title">独立展示</View>
      <BfBadge value={5} />
      <BfBadge value={100} maxValue={99} />
      <BfBadge value="NEW" />
    </>
  );
};