content: // [sample=6] Bulma CSS
  import 'package:jaspr/jaspr.dart' hide Color;
  
  import 'button.dart';
  import 'colors.dart';
  import 'navbar.dart';
  import 'progress_bar.dart';
  import 'tabs.dart';
  
  void main() {
    runApp(App());
  }
  
  class App extends StatelessComponent {
    @override
    Component build(BuildContext context) {
      return fragment([
        ExampleNavbar(),
        ButtonGroup(
          children: [
            Button(child: text('Normal'), onPressed: () {}),
            Button(child: text('Outlined'), isOutlined: true, onPressed: () {}),
            Button(child: text('Primary'), color: Color.primary, onPressed: () {}),
            Button(child: text('Loading'), isLoading: true, onPressed: () {}),
          ],
        ),
        ButtonGroup(
          isAttached: true,
          children: [
            Button(
              child: IconLabel(icon: 'align-left', label: 'Left'),
              onPressed: () {},
            ),
            Button(
              child: IconLabel(icon: 'align-center', label: 'Center'),
              onPressed: () {},
            ),
            Button(
              child: IconLabel(icon: 'align-right', label: 'Right'),
              onPressed: () {},
            ),
          ],
        ),
        ProgressBar(value: 70, color: Color.success),
        ProgressBar(color: Color.warning),
        Tabs(tabs: [text('Pictures'), text('Music'), text('Videos'), text('Documents')], onSelected: (int value) {}),
        Tabs(
          tabs: [
            IconLabel(icon: 'image', label: 'Pictures'),
            IconLabel(icon: 'music', label: 'Music'),
            IconLabel(icon: 'film', label: 'Videos'),
            IconLabel(icon: 'file-alt', label: 'Documents'),
          ],
          isToggle: true,
          onSelected: (int value) {},
        ),
      ]);
    }
  }
  
  class ExampleNavbar extends StatefulComponent {
    const ExampleNavbar({super.key});
  
    @override
    State<ExampleNavbar> createState() => _ExampleNavbarState();
  }
  
  class _ExampleNavbarState extends State<ExampleNavbar> {
    bool isActive = false;
  
    @override
    Component build(BuildContext context) {
      return NavBar(
        brand: NavbarBrand(
          children: [
            NavbarItem(child: BulmaLogo(), href: 'https://bulma.io'),
            NavbarBurger(
              isActive: isActive,
              onToggle: () {
                setState(() => isActive = !isActive);
              },
            ),
          ],
        ),
        menu: NavbarMenu(
          isActive: isActive,
          items: [
            NavbarItem(child: text('Home')),
            NavbarItem(child: text('Documentation')),
            NavbarItem.dropdown(
              child: text('More'),
              items: [
                NavbarItem(child: text('About')),
                NavbarItem(child: text('Jobs')),
                NavbarItem(child: text('Contact')),
                NavbarDivider(),
                NavbarItem(child: text('Report an issue')),
              ],
            ),
          ],
        ),
      );
    }
  }
  
  class BulmaLogo extends StatelessComponent {
    const BulmaLogo({super.key});
  
    @override
    Component build(BuildContext context) {
      return img(src: 'https://bulma.io/assets/brand/Bulma%20Logo.svg', attributes: {'width': '112', 'height': '20'});
    }
  }
  