vizality/renderer/src/builtins/dashboard/routes/Routes.jsx

import { FormNotice, Anchor, Markdown as _Markdown } from '@vizality/components';
import { InstalledList, BrowseList, AddonListing } from '@vizality/components/addon';
import { Content, Layout } from '@vizality/components/dashboard';
import { Route, Switch, Redirect } from 'react-router';
import React, { memo } from 'react';

import Markdown from '../pages/docs/components/Markdown';
import Icons from '../pages/docs/components/Icons';
import Changelog from '../pages/Changelog';
import ErrorTest from '../pages/ErrorTest';
import FourOhFour from '../pages/404';
import Home from '../pages/Home';
import Test from '../pages/Test';

export default memo(() => {
  return (
    <>
      <Switch>
        <Redirect from='/vizality/home' to='/vizality/dashboard' exact />
        <Redirect from='/vizality' to='/vizality/dashboard' exact />
        <Redirect from='/vizality/plugins' to='/vizality/plugins/installed' exact />
        <Redirect from='/vizality/themes' to='/vizality/themes/installed' exact />
        <Redirect from='/vizality/plugin/:id' to='/vizality/plugin/:id/overview' exact />
        <Redirect from='/vizality/theme/:id' to='/vizality/theme/:id/overview' exact />
        <Redirect from='/vizality/docs' to='/vizality/docs/getting-started' exact />
      </Switch>
      <Switch>
        <Route path='/vizality/dashboard' exact>
          <Layout className='vz-dashboard-home'>
            <Content>
              <Home />
            </Content>
          </Layout>
        </Route>
        <Route path='/vizality/plugins/installed' exact>
          <Layout>
            <Content
              header='Plugins'
              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
              icon='plugin'
              className='vz-addons-list-page-content'
            >
              <InstalledList />
            </Content>
          </Layout>
        </Route>
        <Route path='/vizality/plugins/browse' exact>
          <Layout>
            <Content
              header='Plugins'
              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
              icon='plugin'
              className='vz-addons-list-page-content'
            >
              <BrowseList />
            </Content>
          </Layout>
        </Route>
        <Route path='/vizality/themes/installed' exact>
          <Layout>
            <Content
              header='Themes'
              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
              icon='theme'
              className='vz-addons-listing-content'
            >
              <InstalledList />
            </Content>
          </Layout>
        </Route>
        <Route path='/vizality/themes/browse' exact>
          <Layout>
            <Content
              header='Themes'
              description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
              icon='theme'
              className='vz-addons-listing-content'
            >
              <BrowseList />
            </Content>
          </Layout>
        </Route>
        <Route path='/vizality/plugin/:id/:section' exact>
          <Layout>
            <AddonListing />
          </Layout>
        </Route>
        <Route path='/vizality/theme/:id/:section' exact>
          <Layout>
            <AddonListing />
          </Layout>
        </Route>
        <Route path='/vizality/docs/components/icon' exact>
          <Icons selectedTab='preview' />
        </Route>
        <Route path='/vizality/docs/components/markdown' exact>
          <Markdown />
        </Route>
        {/* <Route path='/vizality/docs/components/test' exact>
          <Icons selectedTab='CODE' />
        </Route> */}
        <Route path='/vizality/docs/components/error-boundary' exact>
          <ErrorTest />
        </Route>
        <Route path='/vizality/docs/components/test' exact>
          <Layout>
            <Content header='Table Testing'>
              <Test />
            </Content>
          </Layout>
        </Route>
        <Route path='/vizality/changelog' exact>
          <Layout>
            <Content
              header='Changelog'
              description={<>
                <_Markdown source='All notable changes to this project will be documented in this file. This project attempts to loosely adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).' />
                <FormNotice
                  type={FormNotice.Types.PRIMARY}
                  body={
                    <>
                      <Anchor onClick={() => vizality.api.actions.invokeAction('OPEN_LATEST_CHANGELOG')}>
                        Click here
                      </Anchor>
                      {' to open the latest changelog.'}
                    </>
                  }
                />
              </>}
              icon='more-info'
            >
              <Changelog />
            </Content>
          </Layout>
        </Route>
        <Route>
          <Layout>
            <Content>
              <FourOhFour />
            </Content>
          </Layout>
        </Route>
      </Switch>
    </>
  );
});