import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet, } from '@fluentui/react-docsite-components';
import { PersonaExample } from './Persona.Example';
import { VerticalPersonaExample } from './VerticalPersona.Example';
var PersonaExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/Persona/Persona.Example.tsx');
var VerticalPersonaExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-experiments/Persona/VerticalPersona.Example.tsx');
export var PersonaPage = function (props) {
    return (React.createElement(ComponentPage, { title: " Persona", componentName: " Persona", exampleCards: React.createElement("div", null,
            React.createElement(ExampleCard, { title: "Persona basic usage", code: PersonaExampleCode },
                React.createElement(PersonaExample, null)),
            React.createElement(ExampleCard, { title: "VerticalPersona basic usage", code: VerticalPersonaExampleCode },
                React.createElement(VerticalPersonaExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
                require('!raw-loader?esModule=false!@fluentui/react-experiments/src/components/Persona/Persona.types.ts'),
                require('!raw-loader?esModule=false!@fluentui/react-experiments/src/components/Persona/Vertical/VerticalPersona.types.ts'),
            ] }), overview: React.createElement("div", null,
            React.createElement("p", null, "The Persona component in experiments is the next iteration of the one that is currently in fabric. Currently it supports rendering a vertical variation of the Persona component."),
            React.createElement("p", null, "This may replace the Persona component in a future major version. It'll aim to reduce the DOM impact and in addition support stuff like slots etc for the \"horizontal\" persona as well.")), isHeaderVisible: props.isHeaderVisible }));
};
//# sourceMappingURL=PersonaPage.js.map