import * as React from 'react';
import { CounterBadge } from '@fluentui/react-badge';
var DisplayBadge = function (props) { return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 4, margin: 4 } }, props.children)); };
export var BadgeAppearanceExample = function () {
    var _a = React.useState(90), value = _a[0], setValue = _a[1];
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { style: {
                marginBottom: 16,
            } },
            React.createElement("button", { onClick: function () {
                    if (value > 0) {
                        setValue(function (val) { return val - 1; });
                    }
                } }, "-"),
            React.createElement("button", { onClick: function () { return setValue(function (val) { return val + 1; }); } }, "+")),
        React.createElement("div", { style: {
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                maxWidth: 200,
            } },
            React.createElement(DisplayBadge, null,
                React.createElement(CounterBadge, { dot: true }),
                React.createElement(CounterBadge, { count: value })),
            React.createElement(DisplayBadge, null,
                React.createElement(CounterBadge, { dot: true, color: "warning" }),
                React.createElement(CounterBadge, { count: value, color: "warning" })),
            React.createElement(DisplayBadge, null,
                React.createElement(CounterBadge, { dot: true, color: "important" }),
                React.createElement(CounterBadge, { count: value, color: "important" })),
            React.createElement(DisplayBadge, null,
                React.createElement(CounterBadge, { dot: true, color: "severe" }),
                React.createElement(CounterBadge, { count: value, color: "severe" })),
            React.createElement(DisplayBadge, null,
                React.createElement(CounterBadge, { dot: true, color: "informative" }),
                React.createElement(CounterBadge, { count: value, color: "informative" })))));
};
//# sourceMappingURL=CounterBadge.stories.js.map