@canmingir/link 1.1.6 → 1.1.8

package/minimal/src/sections/_examples/extra/organizational-chart-view.jsx

@@ -1,206 +0,0 @@
-import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import { useTheme } from '@mui/material/styles';
-import Container from '@mui/material/Container';
-
-import { paths } from 'src/routes/paths';
-
-import { _mock } from 'src/_mock';
-
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-import OrganizationalChart from 'src/components/organizational-chart';
-
-import ComponentBlock from '../component-block';
-
-// ----------------------------------------------------------------------
-
-export default function OrganizationalChartView() {
-  const theme = useTheme();
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: theme.palette.mode === 'light' ? 'grey.200' : 'grey.800',
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Organizational Chart"
-            links={[
-              { name: 'Components', href: paths.components },
-              { name: 'Organizational Chart' },
-            ]}
-            moreLink={[
-              'https://www.npmjs.com/package/react-organizational-chart',
-              'https://daniel-hauser.github.io/react-organizational-chart/?path=/story/example-tree--basic',
-            ]}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Stack spacing={5}>
-          <ComponentBlock title="Simple">
-            <OrganizationalChart data={SIMPLE_DATA} lineColor={theme.palette.primary.light} />
-          </ComponentBlock>
-
-          <ComponentBlock title="Standard" sx={{ overflow: 'auto' }}>
-            <OrganizationalChart data={SIMPLE_DATA} variant="standard" lineHeight="40px" />
-          </ComponentBlock>
-
-          <ComponentBlock title="By Group" sx={{ overflow: 'auto' }}>
-            <OrganizationalChart data={DATA} variant="group" lineHeight="64px" />
-          </ComponentBlock>
-        </Stack>
-      </Container>
-    </>
-  );
-}
-
-// ----------------------------------------------------------------------
-
-const createData = (name, group, role, avatarUrl) => ({
-  name,
-  group,
-  role,
-  avatarUrl,
-});
-
-const SIMPLE_DATA = {
-  ...createData('tasha mcneill', 'root', 'ceo, co-founder', _mock.image.avatar(1)),
-  children: [
-    {
-      ...createData('john stone', 'product design', 'lead', _mock.image.avatar(2)),
-      children: [
-        {
-          ...createData('rimsha wynn', 'product design', 'senior', _mock.image.avatar(3)),
-          children: null,
-        },
-      ],
-    },
-    {
-      ...createData('ponnappa priya', 'development', 'lead', _mock.image.avatar(4)),
-      children: [
-        {
-          ...createData('tyra elliott', 'development', 'senior', _mock.image.avatar(5)),
-          children: [
-            {
-              ...createData(
-                'sheridan mckee',
-                'development',
-                'back end developer',
-                _mock.image.avatar(6)
-              ),
-              children: [
-                {
-                  ...createData(
-                    'ang li',
-                    'development',
-                    'back end developer',
-                    _mock.image.avatar(7)
-                  ),
-                  children: null,
-                },
-              ],
-            },
-            {
-              ...createData('hope ahmad', 'development', 'front end', _mock.image.avatar(8)),
-              children: null,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      ...createData('peter stanbridge', 'marketing', 'lead', _mock.image.avatar(9)),
-      children: [
-        {
-          ...createData('madeline harding', 'marketing', 'support', _mock.image.avatar(10)),
-          children: null,
-        },
-        {
-          ...createData('eoin medrano', 'marketing', 'content writer', _mock.image.avatar(11)),
-          children: null,
-        },
-      ],
-    },
-  ],
-};
-
-const DATA = {
-  ...createData('tasha mcneill', 'root', 'ceo, co-founder', _mock.image.avatar(1)),
-  children: [
-    {
-      ...createData('product design', 'product design', null, null),
-      children: [
-        {
-          ...createData('john stone', 'product design', 'lead', _mock.image.avatar(2)),
-          children: [
-            {
-              ...createData('rimsha wynn', 'product design', 'senior', _mock.image.avatar(3)),
-              children: null,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      ...createData('development', 'development', null, null),
-      children: [
-        {
-          ...createData('ponnappa priya', 'development', 'lead', _mock.image.avatar(4)),
-          children: [
-            {
-              ...createData('tyra elliott', 'development', 'senior', _mock.image.avatar(5)),
-              children: [
-                {
-                  ...createData(
-                    'sheridan mckee',
-                    'development',
-                    'back end developer',
-                    _mock.image.avatar(6)
-                  ),
-                  children: [
-                    {
-                      ...createData(
-                        'ang li',
-                        'development',
-                        'back end developer',
-                        _mock.image.avatar(7)
-                      ),
-                      children: null,
-                    },
-                  ],
-                },
-                {
-                  ...createData('hope ahmad', 'development', 'front end', _mock.image.avatar(8)),
-                  children: null,
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      ...createData('marketing', 'marketing', null, null),
-      children: [
-        {
-          ...createData('peter stanbridge', 'marketing', 'lead', _mock.image.avatar(9)),
-          children: [
-            {
-              ...createData('madeline harding', 'marketing', 'support', _mock.image.avatar(10)),
-              children: null,
-            },
-            {
-              ...createData('eoin medrano', 'marketing', 'content writer', _mock.image.avatar(11)),
-              children: null,
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};

package/minimal/src/sections/_examples/extra/scroll-progress-view.jsx

@@ -1,136 +0,0 @@
-import { useRef } from 'react';
-import { useScroll } from 'framer-motion';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Container from '@mui/material/Container';
-import CardHeader from '@mui/material/CardHeader';
-import CardContent from '@mui/material/CardContent';
-
-import { paths } from 'src/routes/paths';
-
-import ScrollProgress from 'src/components/scroll-progress';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-// ----------------------------------------------------------------------
-
-export default function ScrollProgressView() {
-  const containerRef = useRef(null);
-
-  const scrollDocument = useScroll();
-
-  const scrollContainer = useScroll({ container: containerRef });
-
-  return (
-    <>
-      <ScrollProgress scrollYProgress={scrollDocument.scrollYProgress} />
-
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Scroll Progress"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Scroll Progress' },
-            ]}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Card>
-          <CardHeader title="Scroll Container" sx={{ pb: 3 }} />
-          <ScrollProgress
-            scrollYProgress={scrollContainer.scrollYProgress}
-            color="error"
-            sx={{ position: 'unset', height: 6 }}
-          />
-
-          <CardContent ref={containerRef} sx={{ height: 320, overflow: 'auto' }}>
-            Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
-            Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu
-            odio. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu
-            turpis hendrerit fringilla. Phasellus consectetuer vestibulum elit. Phasellus magna.
-            Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium libero. Nullam quis ante.
-            Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus non, euismod id,
-            nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
-            turpis egestas. Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis
-            ullamcorper velit. Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent
-            turpis. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a
-            pretium mi sem ut ipsum. Donec mi odio, faucibus at, scelerisque quis, convallis in,
-            nisi. Quisque ut nisi. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum
-            eget, diam. Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis, euismod ut,
-            mi. Cras ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer vestibulum
-            elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium
-            libero. Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut,
-            faucibus non, euismod id, nulla. Pellentesque habitant morbi tristique senectus et netus
-            et malesuada fames ac turpis egestas. Fusce ac felis sit amet ligula pharetra
-            condimentum. Morbi mattis ullamcorper velit. Vivamus consectetuer hendrerit lacus.
-            Nullam quis ante. Praesent turpis. Praesent porttitor, nulla vitae posuere iaculis, arcu
-            nisl dignissim dolor, a pretium mi sem ut ipsum. Donec mi odio, faucibus at, scelerisque
-            quis, convallis in, nisi. Quisque ut nisi. Suspendisse nisl elit, rhoncus eget,
-            elementum ac, condimentum eget, diam. Vestibulum eu odio. Proin sapien ipsum, porta a,
-            auctor quis, euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. Phasellus
-            consectetuer vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim.
-            Vestibulum volutpat pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien.
-            Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Pellentesque habitant
-            morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac felis
-            sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. Vivamus
-            consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. Praesent porttitor,
-            nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Donec
-            mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi. Suspendisse
-            nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio. Proin
-            sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis
-            hendrerit fringilla. Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam
-            tincidunt adipiscing enim. Vestibulum volutpat pretium libero. Nullam quis ante. Morbi
-            mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla.
-            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
-            egestas. Fusce ac felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper
-            velit. Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. Praesent
-            porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut
-            ipsum. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut
-            nisi. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam.
-            Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras
-            ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer vestibulum elit.
-            Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium libero.
-            Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus
-            non, euismod id, nulla. Pellentesque habitant morbi tristique senectus et netus et
-            malesuada fames ac turpis egestas. Fusce ac felis sit amet ligula pharetra condimentum.
-            Morbi mattis ullamcorper velit. Vivamus consectetuer hendrerit lacus. Nullam quis ante.
-            Praesent turpis. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim
-            dolor, a pretium mi sem ut ipsum. Donec mi odio, faucibus at, scelerisque quis,
-            convallis in, nisi. Quisque ut nisi. Suspendisse nisl elit, rhoncus eget, elementum ac,
-            condimentum eget, diam. Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis,
-            euismod ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer
-            vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat
-            pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus,
-            aliquam ut, faucibus non, euismod id, nulla. Pellentesque habitant morbi tristique
-            senectus et netus et malesuada fames ac turpis egestas. Fusce ac felis sit amet ligula
-            pharetra condimentum. Morbi mattis ullamcorper velit. Vivamus consectetuer hendrerit
-            lacus. Nullam quis ante. Praesent turpis. Praesent porttitor, nulla vitae posuere
-            iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum.
-          </CardContent>
-        </Card>
-
-        <Box
-          sx={{
-            minHeight: 2000,
-            textAlign: 'center',
-            typography: 'h6',
-            my: 10,
-          }}
-        >
-          👇 Scroll Down Document
-        </Box>
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/extra/scroll-view.jsx

@@ -1,113 +0,0 @@
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Container from '@mui/material/Container';
-import CardHeader from '@mui/material/CardHeader';
-import CardContent from '@mui/material/CardContent';
-
-import { paths } from 'src/routes/paths';
-
-import Scrollbar from 'src/components/scrollbar';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-// ----------------------------------------------------------------------
-
-export default function ScrollView() {
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Scrollbar"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Scrollbar' },
-            ]}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Box
-          gap={3}
-          display="grid"
-          alignItems="flex-start"
-          gridTemplateColumns={{
-            xs: 'repeat(1, 1fr)',
-            md: 'repeat(2, 1fr)',
-          }}
-        >
-          <Card>
-            <CardHeader title="Vertical" />
-            <CardContent sx={{ height: 320 }}>
-              <Scrollbar>
-                Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
-                Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam.
-                Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras
-                ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer vestibulum elit.
-                Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat pretium
-                libero. Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci lectus, aliquam
-                ut, faucibus non, euismod id, nulla. Pellentesque habitant morbi tristique senectus
-                et netus et malesuada fames ac turpis egestas. Fusce ac felis sit amet ligula
-                pharetra condimentum. Morbi mattis ullamcorper velit. Vivamus consectetuer hendrerit
-                lacus. Nullam quis ante. Praesent turpis. Praesent porttitor, nulla vitae posuere
-                iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Donec mi odio,
-                faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi. Suspendisse nisl
-                elit, rhoncus eget, elementum ac, condimentum eget, diam. Vestibulum eu odio. Proin
-                sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras ultricies mi eu turpis
-                hendrerit fringilla. Phasellus consectetuer vestibulum elit. Phasellus magna. Nullam
-                tincidunt adipiscing enim. Vestibulum volutpat pretium libero. Nullam quis ante.
-                Morbi mollis tellus ac sapien. Donec orci lectus, aliquam ut, faucibus non, euismod
-                id, nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada
-                fames ac turpis egestas. Fusce ac felis sit amet ligula pharetra condimentum. Morbi
-                mattis ullamcorper velit. Vivamus consectetuer hendrerit lacus. Nullam quis ante.
-                Praesent turpis. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl
-                dignissim dolor, a pretium mi sem ut ipsum.
-              </Scrollbar>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader title="Horizontal" />
-            <CardContent>
-              <Scrollbar>
-                <Box sx={{ width: '200%' }}>
-                  Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Quisque ut nisi.
-                  Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam.
-                  Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Cras
-                  ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer vestibulum
-                  elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum volutpat
-                  pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien. Donec orci
-                  lectus, aliquam ut, faucibus non, euismod id, nulla. Pellentesque habitant morbi
-                  tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac felis
-                  sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit. Vivamus
-                  consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. Praesent
-                  porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi
-                  sem ut ipsum. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi.
-                  Quisque ut nisi. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum
-                  eget, diam. Vestibulum eu odio. Proin sapien ipsum, porta a, auctor quis, euismod
-                  ut, mi. Cras ultricies mi eu turpis hendrerit fringilla. Phasellus consectetuer
-                  vestibulum elit. Phasellus magna. Nullam tincidunt adipiscing enim. Vestibulum
-                  volutpat pretium libero. Nullam quis ante. Morbi mollis tellus ac sapien. Donec
-                  orci lectus, aliquam ut, faucibus non, euismod id, nulla. Pellentesque habitant
-                  morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ac
-                  felis sit amet ligula pharetra condimentum. Morbi mattis ullamcorper velit.
-                  Vivamus consectetuer hendrerit lacus. Nullam quis ante. Praesent turpis. Praesent
-                  porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi
-                  sem ut ipsum.
-                </Box>
-              </Scrollbar>
-            </CardContent>
-          </Card>
-        </Box>
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/extra/snackbar-view.jsx

@@ -1,212 +0,0 @@
-import Box from '@mui/material/Box';
-import Masonry from '@mui/lab/Masonry';
-import Button from '@mui/material/Button';
-import Container from '@mui/material/Container';
-
-import { paths } from 'src/routes/paths';
-
-import { useSnackbar } from 'src/components/snackbar';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-import ComponentBlock from '../component-block';
-
-// ----------------------------------------------------------------------
-
-export default function SnackbarView() {
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
-
-  const onSnackbarAction = (color, anchor) => {
-    enqueueSnackbar(`This is an ${color}`, {
-      variant: color,
-      anchorOrigin: anchor,
-      action: (key) => (
-        <>
-          <Button
-            size="small"
-            color={color !== 'default' ? color : 'primary'}
-            onClick={() => {
-              console.info(`I belong to snackbar with key ${key}`);
-            }}
-          >
-            Alert
-          </Button>
-
-          <Button size="small" color="inherit" onClick={() => closeSnackbar(key)}>
-            Dismiss
-          </Button>
-        </>
-      ),
-    });
-  };
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Snackbar"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Snackbar' },
-            ]}
-            moreLink={['https://www.iamhosseindhv.com/notistack']}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Masonry columns={{ xs: 1, md: 2 }} spacing={3}>
-          <ComponentBlock title="Simple">
-            <Button
-              variant="contained"
-              color="inherit"
-              onClick={() =>
-                enqueueSnackbar('This is an default', {
-                  variant: 'default',
-                })
-              }
-            >
-              Default
-            </Button>
-            <Button
-              variant="contained"
-              color="info"
-              onClick={() =>
-                enqueueSnackbar('This is an info', {
-                  variant: 'info',
-                })
-              }
-            >
-              Info
-            </Button>
-            <Button
-              variant="contained"
-              color="success"
-              onClick={() =>
-                enqueueSnackbar('This is an success', {
-                  variant: 'success',
-                })
-              }
-            >
-              Success
-            </Button>
-            <Button
-              variant="contained"
-              color="warning"
-              onClick={() =>
-                enqueueSnackbar('This is an warning', {
-                  variant: 'warning',
-                })
-              }
-            >
-              Warning
-            </Button>
-            <Button
-              variant="contained"
-              color="error"
-              onClick={() =>
-                enqueueSnackbar('This is an error', {
-                  variant: 'error',
-                })
-              }
-            >
-              Error
-            </Button>
-          </ComponentBlock>
-
-          <ComponentBlock title="With Action">
-            <Button variant="contained" color="inherit" onClick={() => onSnackbarAction('default')}>
-              Default
-            </Button>
-            <Button variant="contained" color="info" onClick={() => onSnackbarAction('info')}>
-              Info
-            </Button>
-            <Button variant="contained" color="success" onClick={() => onSnackbarAction('success')}>
-              Success
-            </Button>
-            <Button variant="contained" color="warning" onClick={() => onSnackbarAction('warning')}>
-              Warning
-            </Button>
-            <Button variant="contained" color="error" onClick={() => onSnackbarAction('error')}>
-              Error
-            </Button>
-          </ComponentBlock>
-
-          <ComponentBlock title="anchorOrigin">
-            <Button
-              variant="text"
-              color="inherit"
-              onClick={() =>
-                onSnackbarAction('default', {
-                  vertical: 'top',
-                  horizontal: 'left',
-                })
-              }
-            >
-              Top Left
-            </Button>
-            <Button
-              variant="text"
-              color="inherit"
-              onClick={() =>
-                onSnackbarAction('default', {
-                  vertical: 'top',
-                  horizontal: 'center',
-                })
-              }
-            >
-              Top Center
-            </Button>
-            <Button variant="text" color="inherit" onClick={() => onSnackbarAction('default')}>
-              Top Right
-            </Button>
-            <Button
-              variant="text"
-              color="inherit"
-              onClick={() =>
-                onSnackbarAction('default', {
-                  vertical: 'bottom',
-                  horizontal: 'left',
-                })
-              }
-            >
-              Bottom Left
-            </Button>
-            <Button
-              variant="text"
-              color="inherit"
-              onClick={() =>
-                onSnackbarAction('default', {
-                  vertical: 'bottom',
-                  horizontal: 'center',
-                })
-              }
-            >
-              Bottom Center
-            </Button>
-            <Button
-              variant="text"
-              color="inherit"
-              onClick={() =>
-                onSnackbarAction('default', {
-                  vertical: 'bottom',
-                  horizontal: 'right',
-                })
-              }
-            >
-              Bottom Right
-            </Button>
-          </ComponentBlock>
-        </Masonry>
-      </Container>
-    </>
-  );
-}