@xyo-network/react-shared 2.23.7

package/src/components/ArchiveProperty.tsx

@@ -0,0 +1,22 @@
+import { TypographyProps, useTheme } from '@mui/material'
+import { LinkEx } from '@xylabs/sdk-react'
+import { XyoPayload } from '@xyo-network/core'
+import { Property, PropertyValue } from '@xyo-network/react-property'
+
+export interface ArchivePropertyProps extends TypographyProps {
+  payload?: XyoPayload
+  path?: string
+}
+
+export const ArchiveProperty: React.FC<ArchivePropertyProps> = ({ payload, path }) => {
+  const theme = useTheme()
+  return (
+    <Property flexGrow={1} title="Archive" value={payload?._archive} tip="This archive that is storing this block">
+      {path ? (
+        <LinkEx to={path} display="flex" color={theme.palette.secondary.main}>
+          <PropertyValue value={payload?._archive} />
+        </LinkEx>
+      ) : null}
+    </Property>
+  )
+}

package/src/components/Footer/Copyright.tsx

@@ -0,0 +1,23 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/sdk-react'
+
+import { Ampersand } from '../Ampersand'
+import { Pipe } from '../Pipe'
+import { FooterLink } from './Link'
+
+export const Copyright: React.FC<FlexBoxProps> = (props) => (
+  <FlexRow {...props}>
+    <Typography margin={1} variant="subtitle1" textAlign="center">
+      Copyright &copy;&nbsp;2022&nbsp;
+      <FooterLink href="https://xy.company/">XY Labs, Inc.</FooterLink>
+      <Ampersand />
+      <FooterLink href="https://xyo.network/">XYO Foundation</FooterLink>
+      <Pipe />
+      <FooterLink href="https://xy.company/privacy/">Privacy Policy</FooterLink>
+      <Pipe />
+      <FooterLink href="https://xy.company/terms/">Terms of Service</FooterLink>
+      <Pipe />
+      <FooterLink href="https://xylabs.com/jobs">Careers</FooterLink>
+    </Typography>
+  </FlexRow>
+)

package/src/components/Footer/DeveloperLinks.tsx

@@ -0,0 +1,14 @@
+import { FlexBoxProps } from '@xylabs/sdk-react'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const DeveloperLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="Developer" {...props}>
+    <FooterLink href="https://xyo.network/developer">Overview</FooterLink>
+    <FooterLink href="https://xyo.network/developer/get-started">Get Started</FooterLink>
+    <FooterLink href="https://xyo.network/developer">SDKs</FooterLink>
+    <FooterLink href="https://github.com/xyoraclenetwork">Open Source Github</FooterLink>
+    <FooterLink href="https://xyo.network/docs/sdk/js">Documentation</FooterLink>
+  </FooterLinks>
+)

package/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,32 @@
+import { Container } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { Footer } from './Footer'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: Footer,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Footer',
+} as ComponentMeta<typeof Footer>
+
+const Template: ComponentStory<typeof Footer> = (args) => (
+  <Container maxWidth="xl" style={{ display: 'flex', flexDirection: 'column', flexGrow: '1', justifyContent: 'end', minHeight: '100vh' }}>
+    <Footer {...args}></Footer>
+  </Container>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+const DynamicHeight = Template.bind({})
+DynamicHeight.args = { dynamicHeight: true }
+
+export { Default, DynamicHeight }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,65 @@
+import { Container, Grid } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/sdk-react'
+import { useState } from 'react'
+
+import { Copyright } from './Copyright'
+import { DeveloperLinks } from './DeveloperLinks'
+import { MoreLinks } from './MoreLinks'
+import { NetworkLinks } from './NetworkLinks'
+import { SocialLinks } from './SocialLinks'
+import { SupportLinks } from './SupportLinks'
+import { XyoTokens } from './XyoTokens'
+
+export interface FooterProps extends FlexBoxProps {
+  dynamicHeight?: boolean
+  footerHtmlElement?: boolean
+}
+
+export const Footer: React.FC<FooterProps> = ({ dynamicHeight = false, footerHtmlElement = false, ...props }) => {
+  const [hovering, setHovering] = useState(false)
+  return (
+    <FlexCol
+      onMouseEnter={() => {
+        setHovering(true)
+      }}
+      onMouseLeave={() => {
+        setHovering(false)
+      }}
+      alignItems="stretch"
+      {...(footerHtmlElement && { component: 'footer' })}
+      {...props}
+    >
+      {hovering || !dynamicHeight ? (
+        <FlexRow alignItems="flex-start">
+          <Container>
+            <Grid container justifyContent="space-between" alignItems="flex-start">
+              <Grid item xs={12} md={2}>
+                <SocialLinks alignItems="flex-start" />
+              </Grid>
+              <Grid item xs={6} md={2}>
+                <NetworkLinks alignItems="flex-start" />
+              </Grid>
+              <Grid item xs={6} md={2}>
+                <XyoTokens alignItems="flex-start" />
+              </Grid>
+              <Grid item xs={6} md={2}>
+                <DeveloperLinks alignItems="flex-start" />
+              </Grid>
+              <Grid item xs={6} md={2}>
+                <MoreLinks alignItems="flex-start" />
+              </Grid>
+              <Grid item xs={6} md={2}>
+                <SupportLinks alignItems="flex-start" />
+              </Grid>
+            </Grid>
+          </Container>
+        </FlexRow>
+      ) : null}
+      <FlexRow>
+        <Container>
+          <Copyright />
+        </Container>
+      </FlexRow>
+    </FlexCol>
+  )
+}

package/src/components/Footer/Link.tsx

@@ -0,0 +1,36 @@
+import { Link, LinkProps } from '@mui/material'
+import { assertEx } from '@xylabs/sdk-js'
+import { LinkEx } from '@xylabs/sdk-react'
+
+/**
+ * @description
+ * FooterLink automatically uses a local To if the link is to the current domain
+ * If the link is not local, it defaults to target being _blank
+ * In the case of 'beta' domains, it navigates correctly
+ */
+
+const convertToBetaIfNeeded = (url: string | URL, currentUrl = new URL(document.location.href)) => {
+  const urlObj = typeof url === 'string' ? new URL(url) : url
+  const currentUrlObj = typeof currentUrl === 'string' ? new URL(currentUrl) : currentUrl
+  const currentHostnameParts = currentUrlObj.hostname.split('.')
+  const beta = currentHostnameParts.shift() === 'beta'
+  if (beta) {
+    const currentHostnameWithoutBeta = currentHostnameParts.join('.')
+    if (currentHostnameWithoutBeta === urlObj.hostname) {
+      urlObj.hostname = currentUrlObj.hostname
+    }
+  }
+  return urlObj
+}
+
+export const FooterLink: React.FC<LinkProps> = ({ target, href, margin = 0.5, variant = 'body2', ...props }) => {
+  const url = new URL(assertEx(href, 'href not set'))
+  assertEx(url.hostname, 'Hostname is required in href')
+  const convertedUrl = convertToBetaIfNeeded(url)
+  if (document.location.hostname === convertedUrl.hostname) {
+    const to = url.search.length > 0 ? `${convertedUrl.pathname}${convertedUrl.search}` : url.pathname
+    return <LinkEx margin={margin} to={to} target={target} variant={variant} {...props} />
+  } else {
+    return <Link margin={margin} href={href} target={target ?? '_blank'} variant={variant} {...props} />
+  }
+}

package/src/components/Footer/Links.tsx

@@ -0,0 +1,13 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/sdk-react'
+
+export const FooterLinks: React.FC<FlexBoxProps> = ({ children, title, ...props }) => {
+  return (
+    <FlexCol margin={1} justifyContent="flex-start" title={title} {...props}>
+      <Typography margin={0.5} variant="h6" noWrap>
+        {title}
+      </Typography>
+      {children}
+    </FlexCol>
+  )
+}

package/src/components/Footer/MoreLinks.tsx

@@ -0,0 +1,12 @@
+import { FlexBoxProps } from '@xylabs/sdk-react'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const MoreLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="More" {...props}>
+    <FooterLink href="https://xyo.network/partners">Partners</FooterLink>
+    <FooterLink href="https://xyo.network/fhr">FHR</FooterLink>
+    <FooterLink href="https://xyo.network/brand">Brand</FooterLink>
+  </FooterLinks>
+)

package/src/components/Footer/NetworkLinks.tsx

@@ -0,0 +1,13 @@
+import { FlexBoxProps } from '@xylabs/sdk-react'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const NetworkLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="Network" {...props}>
+    <FooterLink href="https://xyo.network/network">Overview</FooterLink>
+    <FooterLink href="https://xyo.network/network/bound-witness">Bound Witness</FooterLink>
+    <FooterLink href="https://xyo.network/network/proof-of-origin">Proof Of Origin</FooterLink>
+    <FooterLink href="https://xyo.network/papers">White Paper</FooterLink>
+  </FooterLinks>
+)

package/src/components/Footer/SocialLinks.tsx

@@ -0,0 +1,39 @@
+import { Facebook, Instagram, LinkedIn, Reddit, Telegram, Twitter, YouTube } from '@mui/icons-material'
+import { FlexBoxProps, FlexRow } from '@xylabs/sdk-react'
+import { FaDiscord } from 'react-icons/fa'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const SocialLinks: React.FC<FlexBoxProps> = (props) => {
+  return (
+    <FooterLinks title="XYO Socials" {...props}>
+      <FlexRow flexWrap="wrap" justifyContent="flex-start">
+        <FooterLink href="https://business.facebook.com/OfficialXYO/">
+          <Facebook />
+        </FooterLink>
+        <FooterLink href="https://twitter.com/OfficialXYO">
+          <Twitter />
+        </FooterLink>
+        <FooterLink href="https://www.instagram.com/officialxyo/">
+          <Instagram />
+        </FooterLink>
+        <FooterLink href="https://t.me/xyonetwork">
+          <Telegram />
+        </FooterLink>
+        <FooterLink href="https://www.reddit.com/r/XYONetwork/">
+          <Reddit />
+        </FooterLink>
+        <FooterLink href="https://www.youtube.com/channel/UCyZDqb9pgntVHJVt1pxXtsw">
+          <YouTube />
+        </FooterLink>
+        <FooterLink href="https://www.linkedin.com/company/officialxyo/">
+          <LinkedIn />
+        </FooterLink>
+        <FooterLink href="https://discord.com/channels/935586624392298547/935586625101103227">
+          <FaDiscord />
+        </FooterLink>
+      </FlexRow>
+    </FooterLinks>
+  )
+}

package/src/components/Footer/SupportLinks.tsx

@@ -0,0 +1,11 @@
+import { FlexBoxProps } from '@xylabs/sdk-react'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const SupportLinks: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="Support" {...props}>
+    <FooterLink href="https://support.xy.company/hc/en-us/categories/360001417734">Help Center</FooterLink>
+    <FooterLink href="https://support.xy.company/hc/en-us/requests/new">Contact Support</FooterLink>
+  </FooterLinks>
+)

package/src/components/Footer/XyoTokens.tsx

@@ -0,0 +1,15 @@
+import { FlexBoxProps } from '@xylabs/sdk-react'
+import React from 'react'
+
+import { FooterLink } from './Link'
+import { FooterLinks } from './Links'
+
+export const XyoTokens: React.FC<FlexBoxProps> = (props) => (
+  <FooterLinks title="XYO Tokens" {...props}>
+    <FooterLink href="https://xyo.network/token">About</FooterLink>
+    <FooterLink href="https://xyo.network/token/exchange">Exchanges</FooterLink>
+    <FooterLink href="https://xyo.network/token/price">Prices</FooterLink>
+    <FooterLink href="https://xyo.network/token/wallet">Wallets</FooterLink>
+    <FooterLink href="https://etherscan.io/address/0x55296f69f40ea6d20e478533c15a6b08b654e758">Contract</FooterLink>
+  </FooterLinks>
+)

package/src/components/Footer/index.ts

@@ -0,0 +1,10 @@
+export * from './Copyright'
+export * from './DeveloperLinks'
+export * from './Footer'
+export * from './Link'
+export * from './Links'
+export * from './MoreLinks'
+export * from './NetworkLinks'
+export * from './SocialLinks'
+export * from './SupportLinks'
+export * from './XyoTokens'

package/src/components/JsonRouteWrapper/JsonApiButton.tsx

@@ -0,0 +1,19 @@
+import { ButtonEx, ButtonExProps } from '@xylabs/sdk-react'
+import { useSearchParams } from 'react-router-dom'
+
+export const JsonApiButton: React.FC<ButtonExProps> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  return (
+    <ButtonEx
+      marginX={2}
+      variant="outlined"
+      onClick={() => {
+        searchParams.set('json', 'true')
+        setSearchParams(searchParams)
+      }}
+      {...props}
+    >
+      JSON
+    </ButtonEx>
+  )
+}

package/src/components/JsonRouteWrapper/JsonFromUrl.stories.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable deprecation/deprecation */
+/* eslint-disable import/no-deprecated */
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol } from '@xylabs/sdk-react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { DeprecateStory } from '../../.storybook'
+import { JsonFromUrl } from './JsonFromUrl'
+
+const StorybookEntry = {
+  argTypes: {
+    apiDomain: {
+      defaultValue: 'http://localhost:8081',
+    },
+  },
+  component: JsonFromUrl,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Json/JsonFromUrl',
+} as ComponentMeta<typeof JsonFromUrl>
+
+const Template: ComponentStory<typeof JsonFromUrl> = (props) => {
+  return (
+    <>
+      <DeprecateStory />
+      <BrowserRouter>
+        <FlexCol>
+          <JsonFromUrl {...props}></JsonFromUrl>
+        </FlexCol>
+      </BrowserRouter>
+    </>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = { pathname: '/stats' }
+
+const CustomTheme = Template.bind({})
+CustomTheme.args = { pathname: '/stats', theme: 'apathy:inverted' }
+
+const ErrorState = Template.bind({})
+ErrorState.args = { pathname: '/foo' }
+
+export { CustomTheme, Default, ErrorState }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/JsonRouteWrapper/JsonFromUrl.tsx

@@ -0,0 +1,50 @@
+import { ErrorDialog, FlexCol, useAsyncEffect } from '@xylabs/sdk-react'
+import axios, { AxiosError, AxiosResponse } from 'axios'
+import { lazy, Suspense, useState } from 'react'
+import { ThemeKeys, ThemeObject } from 'react-json-view'
+import { useLocation } from 'react-router-dom'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+const sanitizeUrlForApi = (path: string) => {
+  if (new RegExp(/json$/g).test(path)) {
+    return path.split('json')[0]
+  } else {
+    return path
+  }
+}
+
+export interface JsonFromUrlProps {
+  apiDomain: string
+  pathname?: string
+  theme?: ThemeKeys | ThemeObject
+}
+
+/**  @deprecated - Move to JsonRouteWrapper Component */
+export const JsonFromUrl: React.FC<JsonFromUrlProps> = ({ pathname, apiDomain, ...JsonViewProps }) => {
+  const location = useLocation()
+  const path = pathname ? pathname : location.pathname
+  const [apiResponse, setApiResponse] = useState<AxiosResponse>()
+  const [apiError, setApiError] = useState<AxiosError>()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useAsyncEffect(async () => {
+    const apiPath = sanitizeUrlForApi(path)
+    const url = `${apiDomain}${apiPath}`
+
+    try {
+      const response = await axios.get(url)
+      setApiResponse(response.data)
+    } catch (err) {
+      setApiError(err as AxiosError)
+    }
+  }, [apiDomain, path])
+
+  return (
+    <>
+      <p>Resource - {sanitizeUrlForApi(path)}</p>
+      <Suspense fallback={<FlexCol />}>{apiResponse && <JsonView src={apiResponse} collapseStringsAfterLength={64} {...JsonViewProps} />}</Suspense>
+      <ErrorDialog title="Error Fetching JSON" error={apiError} open={!!apiError} onAction={() => setApiError(undefined)} />
+    </>
+  )
+}

package/src/components/JsonRouteWrapper/JsonRouteWrapper.stories.tsx

@@ -0,0 +1,69 @@
+import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
+import { ButtonEx, FlexCol } from '@xylabs/sdk-react'
+import { XyoArchivistApi } from '@xyo-network/api'
+import { BrowserRouter, useSearchParams } from 'react-router-dom'
+
+import { JsonRouteWrapper } from './JsonRouteWrapper'
+
+const JsonDecorator: DecoratorFn = (Story) => (
+  <BrowserRouter>
+    <Story />
+  </BrowserRouter>
+)
+
+const StorybookEntry = {
+  argTypes: {
+    apiDomain: {
+      defaultValue: 'https://beta.api.archivist.xyo.network',
+    },
+  },
+  component: JsonRouteWrapper,
+  decorators: [JsonDecorator],
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Json/JsonRouteWrapper',
+} as ComponentMeta<typeof JsonRouteWrapper>
+
+const Template: ComponentStory<typeof JsonRouteWrapper> = (props) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const activeJson = searchParams.get('json')
+  return (
+    <FlexCol>
+      <ButtonEx
+        marginY={3}
+        onClick={() => {
+          activeJson === 'true' ? searchParams.delete('json') : searchParams.set('json', 'true')
+          setSearchParams(searchParams)
+        }}
+        variant="outlined"
+      >
+        Toggle JSON Page
+      </ButtonEx>
+      <JsonRouteWrapper {...props}></JsonRouteWrapper>
+    </FlexCol>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {
+  callback: () => new XyoArchivistApi({ apiDomain: 'https://beta.api.archivist.xyo.network' }).archive('temp').block.stats.get(),
+}
+
+const HideBackButton = Template.bind({})
+HideBackButton.args = {
+  callback: () =>
+    new XyoArchivistApi({
+      apiDomain: 'https://beta.api.archivist.xyo.network',
+    })
+      .archive('temp')
+      .block.stats.get(),
+  noBackButton: true,
+}
+
+export { Default, HideBackButton }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/JsonRouteWrapper/JsonRouteWrapper.tsx

@@ -0,0 +1,75 @@
+import { ButtonEx, ErrorDialog, FlexBoxProps, FlexCol, FlexRow, useAsyncEffect } from '@xylabs/sdk-react'
+import { XyoApiError } from '@xyo-network/api'
+import { lazy, Suspense, useState } from 'react'
+import { ReactJsonViewProps } from 'react-json-view'
+import { useSearchParams } from 'react-router-dom'
+
+import { JsonApiButton } from './JsonApiButton'
+
+const JsonView = lazy(() => import(/* webpackChunkName: "jsonView" */ 'react-json-view'))
+
+export interface JsonFromPromiseProps extends FlexBoxProps {
+  callback: () => Promise<object | undefined>
+  noBackButton?: boolean
+  noJsonButton?: boolean
+  jsonViewProps?: ReactJsonViewProps
+}
+
+export const JsonRouteWrapper: React.FC<JsonFromPromiseProps> = ({ callback, children, noBackButton = false, noJsonButton = false, jsonViewProps, ...props }) => {
+  const [apiResponse, setApiResponse] = useState<object>()
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const active = !!searchParams.get('json')
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      try {
+        const response = await callback()
+        if (mounted()) {
+          setApiResponse(response)
+        }
+      } catch (ex) {
+        if (mounted()) {
+          const error = ex as XyoApiError
+          if (error.isXyoError) {
+            setApiError(error)
+          } else {
+            throw ex
+          }
+        }
+      }
+    },
+    [callback]
+  )
+
+  return (
+    <FlexCol {...props}>
+      {active ? (
+        <>
+          <Suspense fallback={null}>{apiResponse && <JsonView src={apiResponse} collapseStringsAfterLength={64} {...jsonViewProps} />}</Suspense>
+          {!noBackButton && (
+            <FlexRow marginY={3}>
+              <ButtonEx
+                flexDirection="row"
+                variant="outlined"
+                onClick={() => {
+                  searchParams.delete('json')
+                  setSearchParams(searchParams)
+                }}
+              >
+                Back
+              </ButtonEx>
+            </FlexRow>
+          )}
+          <ErrorDialog title="Error Fetching JSON" error={apiError} open={!!apiError} onAction={() => setApiError(undefined)} />
+        </>
+      ) : (
+        <>
+          {children}
+          {!noJsonButton && <JsonApiButton marginTop={2} />}
+        </>
+      )}
+    </FlexCol>
+  )
+}

package/src/components/JsonRouteWrapper/index.ts

@@ -0,0 +1,3 @@
+export * from './JsonApiButton'
+export * from './JsonFromUrl'
+export * from './JsonRouteWrapper'

package/src/components/NotFound.tsx

@@ -0,0 +1,17 @@
+import { Typography } from '@mui/material'
+import { FlexGrowCol } from '@xylabs/sdk-react'
+
+const NotFound = () => {
+  return (
+    <>
+      <FlexGrowCol>
+        <Typography variant="h2">Sorry!</Typography>
+        <Typography marginY={3} variant="body2">
+          {"Can't find anything here"}
+        </Typography>
+      </FlexGrowCol>
+    </>
+  )
+}
+
+export { NotFound }

package/src/components/Pipe.tsx

@@ -0,0 +1,9 @@
+import { Typography, TypographyProps } from '@mui/material'
+
+export const Pipe: React.FC<TypographyProps> = (props) => {
+  return (
+    <Typography marginX={1} component="span" {...props}>
+      |
+    </Typography>
+  )
+}

package/src/components/ScrollTableOnSm.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material'
+import { WithChildren } from '@xylabs/sdk-react'
+
+const StyledScrollTableOnSm = styled('div')(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    overflowX: 'scroll',
+  },
+  display: 'flex',
+  flexGrow: 1,
+}))
+
+const ScrollTableOnSm: React.FC<WithChildren> = ({ children }) => <StyledScrollTableOnSm>{children}</StyledScrollTableOnSm>
+
+export { ScrollTableOnSm }

package/src/components/StyleGuide/AppBars.example.tsx

@@ -0,0 +1,25 @@
+import { Menu as MenuIcon } from '@mui/icons-material'
+import { Button, IconButton, Toolbar, Typography } from '@mui/material'
+import { AppBarEx, FlexCol } from '@xylabs/sdk-react'
+
+export const AppBarsExample = () => {
+  const contextToolbar = (
+    <Toolbar disableGutters>
+      <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
+        <MenuIcon />
+      </IconButton>
+      <Typography variant="h6" color="inherit" component="div">
+        Photos
+      </Typography>
+    </Toolbar>
+  )
+
+  const systemToolbar = <Button variant="contained">Get Started</Button>
+
+  return (
+    <FlexCol alignItems="stretch">
+      <Typography variant="subtitle1">App Bar</Typography>
+      <AppBarEx elevation={0} contextToolbar={contextToolbar} systemToolbar={systemToolbar} />
+    </FlexCol>
+  )
+}