ChurchCenterStatus

View Source

Church Center

Copy

Edit

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

Church Center

Copy

Edit

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

Church Center

Copy

Edit

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled={false}
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled={false}
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

Church Center

Copy

Edit

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled={false}
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled={false}
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

Custom icons

To use the Planning Center General set of icons, import the general set to your theme and define the overrides with the icons prop.

To learn how to import the general set to your theme, see Grouped Icon Sets.

Church Center

Copy

Edit

render(
  <ThemeProvider theme={{ icons }}>
    <StackView axis="horizontal" spacing={2}>
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled
        ccWebEnabled={false}
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled={false}
        ccWebEnabled
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
    </StackView>
  </ThemeProvider>
)

render(
  <ThemeProvider theme={{ icons }}>
    <StackView axis="horizontal" spacing={2}>
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled
        ccWebEnabled={false}
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled={false}
        ccWebEnabled
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
    </StackView>
  </ThemeProvider>
)