import { __extends } from "tslib";
import * as React from 'react';
import { PersonaCoin } from '@fluentui/react-experiments';
import { Stack, Text } from '@fluentui/react';
import { PersonaTestImages } from '@fluentui/react-experiments/lib/common/TestImages';
var tokens = {
    sectionStack: {
        childrenGap: 32,
    },
    headingStack: {
        childrenGap: 16,
    },
    personaCoinStack: {
        childrenGap: 12,
    },
};
var PersonaCoinSizeAndColorExample = /** @class */ (function (_super) {
    __extends(PersonaCoinSizeAndColorExample, _super);
    function PersonaCoinSizeAndColorExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PersonaCoinSizeAndColorExample.prototype.render = function () {
        return (React.createElement(Stack, { tokens: tokens.sectionStack },
            React.createElement(Stack, { tokens: tokens.headingStack, padding: 8 },
                React.createElement(Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(Text, null, "Sizes"),
                    React.createElement(Stack, { horizontal: true, disableShrink: true, tokens: tokens.personaCoinStack },
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 10 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 24 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 28 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 40 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 48 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 56 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 72 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 100 })),
                    React.createElement(Stack, { horizontal: true, disableShrink: true, tokens: tokens.personaCoinStack },
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 10, imageUrl: PersonaTestImages.personMale }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 24, imageUrl: PersonaTestImages.personMale, presence: 1 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 28, imageUrl: PersonaTestImages.personMale }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 40, imageUrl: PersonaTestImages.personMale, presence: 2 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 48, imageUrl: PersonaTestImages.personMale }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 56, imageUrl: PersonaTestImages.personMale, presence: 3 }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 72, imageUrl: PersonaTestImages.personMale }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", size: 100, imageUrl: PersonaTestImages.personMale, presence: 4 }))),
                React.createElement(Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(Text, null, "Custom colors"),
                    React.createElement(Stack, { horizontal: true, disableShrink: true, tokens: tokens.personaCoinStack },
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", coinColor: "red", initialsColor: "black" }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", coinColor: "beige", initialsColor: "black" }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", coinColor: "blue" }),
                        React.createElement(PersonaCoin, { text: "Kevin Jameson", coinColor: "orange" }))))));
    };
    return PersonaCoinSizeAndColorExample;
}(React.Component));
export { PersonaCoinSizeAndColorExample };
//# sourceMappingURL=PersonaCoinSizeAndColor.Example.js.map