Application Switcher

import { OdsApplicationSwitcher } from '@ods/components/react.application-switcher';
import { OdsAdminButton } from '@ods/components/react.ods-admin-button';
import { OdsInsightsButton } from '@ods/components/react.ods-insights-button';
import { OdsAssetcareButton } from '@ods/components/react.ods-assetcare-button';
import { OdsReportsButton } from '@ods/components/react.ods-reports-button';

const css = `
  /* Only used for documentation */
  .application-switcher-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ods-sys-color-accent);
    width: 64px;
    height: 64px;
  }
`;

const Example = () => {
  return (
    <>
      <div className="application-switcher-demo">
        <OdsApplicationSwitcher>
          <OdsAdminButton href="/"></OdsAdminButton>
          <OdsInsightsButton href="/about/about-us/"></OdsInsightsButton>
          <OdsReportsButton href="/getting-started/"></OdsReportsButton>
          <OdsAssetcareButton href="/components/button/"></OdsAssetcareButton>
        </OdsApplicationSwitcher>
      </div>

      <style>{css}</style>
    </>

  )
};

export default Example;