part of 'pages.dart';

class BadgesPage extends StatefulWidget {
  const BadgesPage({ Key? key }) : super(key: key);
  static const routeName = '/badges_page';

  @override
  _BadgesPageState createState() => _BadgesPageState();
}

class _BadgesPageState extends State<BadgesPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: LLSColors.PRIMARY,
        leading: InkWell(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            child: Icon(
              CupertinoIcons.back,
              color: LLSColors.WHITE,
            ),
          ),
        ),
        title: const Text(
          'Badges',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          const Padding(
            padding: EdgeInsets.only(left: 15, top: 20),
            child: LLSLabel(
              text: 'With Buttons',
              type: LLSLabelType.typo5,
              dividerWidth: 25,
              dividerColor: LLSColors.SECONDARY,
            ),
          ),

          LLSCard(
            content: Column(
              children: <Widget>[
                const SizedBox(
                  height: 10,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Primary',
                      ),
                    ),
                    const SizedBox(
                      width: 6,
                    ),
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Second',
                        color: LLSColors.SECONDARY,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Success',
                        color: LLSColors.SUCCESS,
                      ),
                    ),
                    const SizedBox(
                      width: 6,
                    ),
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Warning',
                        color: LLSColors.WARNING,
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Danger',
                        color: LLSColors.DANGER,
                      ),
                    ),
                    const SizedBox(
                      width: 6,
                    ),
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Info',
                        color: LLSColors.INFO,
                      ),
                    )
                  ],
                ),
                const SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Light',
                        color: LLSColors.LIGHT,
                      ),
                    ),
                    const SizedBox(
                      width: 6,
                    ),
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Dark',
                        textStyle: const TextStyle(color: LLSColors.WHITE),
                        color: LLSColors.DARK,
                      ),
                    ),
                    const SizedBox(
                      width: 6,
                    ),
                    Expanded(
                      child: LLSButtonBadge(
                        icon: const LLSBadge(
                          size: LLSSize.MEDIUM,
                          text: '6',
                          shape: LLSBadgeShape.pills,
                        ),
                        onPressed: () {},
                        text: 'Link',
                        color: LLSColors.TRANSPARENT,
                      ),
                    )
                  ],
                ),
                const SizedBox(
                  height: 10,
                ),
              ],
            ),
          ),
          const Padding(
            padding: EdgeInsets.only(left: 15, top: 20),
            child: LLSLabel(
              text: 'Icon with Badges',
              type: LLSLabelType.typo5,
              dividerWidth: 25,
              dividerColor: LLSColors.SECONDARY,
            ),
          ),
          LLSCard(
            content: Column(
              children: <Widget>[
                const SizedBox(
                  height: 20,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    LLSIconBadge(
                      child: LLSIconButton(
                        type: LLSButtonType.transparent,
                        onPressed: () {},
                        icon: const Icon(
                          Icons.access_alarm,
                          color: LLSColors.DANGER,
                        ),
                      ),
                      counterChild: const LLSBadge(
                        text: '12',
                        shape: LLSBadgeShape.circle,
                      ),
                      right: 2,
                    ),
                    LLSIconBadge(
                      child: LLSIconButton(
                        type: LLSButtonType.transparent,
                        onPressed: () {},
                        icon: const Icon(
                          Icons.notifications,
                          color: LLSColors.INFO,
                        ),
                      ),
                      counterChild: const LLSBadge(
                        text: '12',
                        shape: LLSBadgeShape.standard,
                      )
                    ),
                    LLSIconBadge(
                      child: LLSIconButton(
                        type: LLSButtonType.transparent,
                        onPressed: () {},
                        icon: const Icon(
                          Icons.message,
                          color: LLSColors.LIGHT,
                        ),
                      ),
                      counterChild: const LLSBadge(
                        text: '12',
                        shape: LLSBadgeShape.square,
                      )
                    ),
                    LLSIconBadge(
                      child: LLSIconButton(
                        type: LLSButtonType.transparent,
                        onPressed: () {},
                        icon: const Icon(
                          Icons.message,
                          color: LLSColors.SUCCESS,
                        ),
                      ),
                      counterChild: const LLSBadge(
                        text: '12',
                        shape: LLSBadgeShape.pills,
                      )
                    ),
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}