@canmingir/link 1.1.7 → 1.2.0

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

@@ -1,204 +0,0 @@
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import Divider from '@mui/material/Divider';
-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 Markdown from 'src/components/markdown';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-// ----------------------------------------------------------------------
-
-const htmlContent = `
-
-<h1>h1</h1>
-
-<br/>
-
-<h2>h2</h2>
-
-<br/>
-
-<p> <strong>Paragraph</strong> Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</p>
-
-<br/>
-
-<p>
-  <a href='https://www.google.com/'>Link (https://www.google.com/)</a>
-</p>
-
-<br/>
-
-<h6>Lists</h6>
-
-<br/>
-
-<ul>
-  <li>
-    <input type="checkbox" disabled="" checked=""> Write the press release
-  </li>
-  <li>
-    <input type="checkbox" disabled=""> Update the website
-  </li>
-  <li>
-    <input type="checkbox" disabled=""> Contact the media
-  </li>
-</ul>
-
-<br/>
-
-<hr/>
-
-<br/>
-
-<h6>A table:</h6>
-
-<br/>
-
-<table>
-  <thead>
-    <tr>
-      <th style="text-align: left;">Syntax</th>
-      <th style="text-align: center;">Description</th>
-      <th style="text-align: right;">Test Text</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td style="text-align: left;">Header</td>
-      <td style="text-align: center;">Title</td>
-      <td style="text-align: right;">Here's this</td>
-    </tr>
-    <tr>
-      <td style="text-align: left;">Paragraph</td>
-      <td style="text-align: center;">Text</td>
-      <td style="text-align: right;">And more</td>
-    </tr>
-  </tbody>
-</table>
-
-<br/>
-
-<pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
-<span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactDOM</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>;
-<span class="hljs-keyword">import</span> <span class="hljs-title class_">ReactMarkdown</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-markdown'</span>;
-<span class="hljs-keyword">import</span> rehypeHighlight <span class="hljs-keyword">from</span> <span class="hljs-string">'rehype-highlight'</span>;
-
-<span class="hljs-title class_">ReactDOM</span>.<span class="hljs-title function_">render</span>(
-  <span class="hljs-tag">&lt;<span class="hljs-name">ReactMarkdown</span> <span class="hljs-attr">rehypePlugins</span>=<span class="hljs-string">{[rehypeHighlight]}</span>&gt;</span>{'# Your markdown here'}<span class="hljs-tag">&lt;/<span class="hljs-name">ReactMarkdown</span>&gt;</span>,
-  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#content'</span>)
-);
-</pre>
-
-<br/>
-
-<img alt='cover' src='https://res.cloudinary.com/trinhmai/image/upload/v1660897321/_minimal_mock/_Cover/cover_19.jpg'>
-
-<blockquote> <p>A block quote with <s>strikethrough</s> and a URL: <a href='https://reactjs.org'>https://reactjs.org</a>.</p> </blockquote>
-`;
-
-const mardownContent = `
-# h1
-
-<br/>
-
-## h2
-
-<br/>
-
-**Paragraph** Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
-
-<br/>
-
-[Link (https://www.google.com/)](https://www.google.com/)
-
-<br/>
-
-###### Lists
-
-<br/>
-
-- [x] Write the press release
-- [ ] Update the website
-- [ ] Contact the media
-
-<br/>
-
----
-
-<br/>
-
-###### A table:
-
-<br/>
-
-| Syntax      | Description | Test Text     |
-| :---        |    :----:   |          ---: |
-| Header      | Title       | Here's this   |
-| Paragraph   | Text        | And more      |
-
-<br/>
-
-\`\`\`tsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactMarkdown from 'react-markdown';
-import rehypeHighlight from 'rehype-highlight';
-
-ReactDOM.render(
-  <ReactMarkdown rehypePlugins={[rehypeHighlight]}>{'# Your markdown here'}</ReactMarkdown>,
-  document.querySelector('#content')
-);
-\`\`\`
-
-<br/>
-
-![cover](https://res.cloudinary.com/trinhmai/image/upload/v1660897321/_minimal_mock/_Cover/cover_19.jpg)
-
-> A block quote with ~~strikethrough~~ and a URL: [https://reactjs.org](https://reactjs.org).
-`;
-
-export default function MarkdownView() {
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Markdown"
-            links={[{ name: 'Components', href: paths.components }, { name: 'Markdown' }]}
-            moreLink={['https://www.npmjs.com/package/react-markdown']}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Stack spacing={3} direction={{ xs: 'column', md: 'row' }}>
-          <Card>
-            <CardHeader title="Html content" sx={{ pb: 3 }} />
-            <Divider sx={{ borderStyle: 'dashed' }} />
-            <CardContent>
-              <Markdown children={htmlContent} />
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader title="Mardown content" sx={{ pb: 3 }} />
-            <Divider sx={{ borderStyle: 'dashed' }} />
-            <CardContent>
-              <Markdown children={mardownContent} />
-            </CardContent>
-          </Card>
-        </Stack>
-      </Container>
-    </>
-  );
-}

package/minimal/src/sections/_examples/extra/mega-menu-view.jsx

@@ -1,318 +0,0 @@
-import { useEffect } from 'react';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
-import AppBar from '@mui/material/AppBar';
-import Button from '@mui/material/Button';
-import Drawer from '@mui/material/Drawer';
-import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-
-import { paths } from 'src/routes/paths';
-import { usePathname } from 'src/routes/hooks';
-
-import { useBoolean } from 'src/hooks/use-boolean';
-
-import { _mock } from 'src/_mock';
-
-import Logo from 'src/components/logo';
-import Iconify from 'src/components/iconify';
-import Scrollbar from 'src/components/scrollbar';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-import {
-  MegaMenuMobile,
-  MegaMenuDesktopVertical,
-  MegaMenuDesktopHorizontal,
-} from 'src/components/mega-menu';
-
-// ----------------------------------------------------------------------
-
-export default function MegaMenuView() {
-  const pathname = usePathname();
-
-  const mobileOpen = useBoolean();
-
-  useEffect(() => {
-    if (mobileOpen) {
-      mobileOpen.onFalse();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname]);
-
-  const renderHorizontal = (
-    <AppBar
-      position="static"
-      color="transparent"
-      sx={{
-        height: 72,
-        boxShadow: (theme) => theme.customShadows.z8,
-      }}
-    >
-      <Toolbar component={Container} disableGutters sx={{ height: 1 }}>
-        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-          Menu Horizon
-        </Typography>
-
-        <MegaMenuDesktopHorizontal data={NAV_ITEMS} />
-      </Toolbar>
-    </AppBar>
-  );
-
-  const renderVertical = (
-    <Stack direction="row" spacing={3} mt={5}>
-      <Card sx={{ width: 260, flexShrink: 0, overflow: 'unset', zIndex: 9 }}>
-        <Typography variant="h6" sx={{ p: 2 }}>
-          Menu Vertical
-        </Typography>
-
-        <MegaMenuDesktopVertical data={NAV_ITEMS} />
-      </Card>
-
-      <div>
-        <Box component="img" alt="any photo" src={_mock.image.cover(2)} sx={{ borderRadius: 1 }} />
-      </div>
-    </Stack>
-  );
-
-  const renderMobile = (
-    <>
-      <Button
-        color="inherit"
-        variant="contained"
-        onClick={mobileOpen.onTrue}
-        startIcon={<Iconify icon="carbon:menu" />}
-      >
-        Menu Mobile
-      </Button>
-
-      <Drawer
-        open={mobileOpen.value}
-        onClose={mobileOpen.onFalse}
-        PaperProps={{
-          sx: {
-            pb: 5,
-            width: 260,
-          },
-        }}
-      >
-        <Scrollbar>
-          <Logo sx={{ mx: 2.5, my: 3 }} />
-
-          <MegaMenuMobile data={NAV_ITEMS} />
-        </Scrollbar>
-      </Drawer>
-    </>
-  );
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Mega Menu"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Mega Menu' },
-            ]}
-          />
-        </Container>
-      </Box>
-
-      {renderHorizontal}
-
-      <Container sx={{ my: 10 }}>
-        {renderMobile}
-
-        {renderVertical}
-      </Container>
-    </>
-  );
-}
-
-// ----------------------------------------------------------------------
-
-const NAV_ITEMS = [
-  {
-    title: 'Item 1',
-    path: '#',
-    icon: <Iconify icon="carbon:accessibility-alt" sx={{ width: 1, height: 1 }} />,
-    products: [...Array(10)].map((_, index) => ({
-      name: _mock.productName(index),
-      coverUrl: _mock.image.product(index),
-      path: '#',
-    })),
-    moreLink: {
-      title: 'More Categories',
-      path: '#',
-    },
-    tags: [
-      { title: 'Paper Cup', path: '#' },
-      { title: 'Lotion Pump', path: '#' },
-      { title: 'Brush Cutter', path: '#' },
-      { title: 'Display Rack', path: '#' },
-      { title: 'Glass Bottle', path: '#' },
-    ],
-    children: [
-      {
-        subheader: 'Other Machinery & Parts',
-        items: [
-          { title: 'Metallic Processing Machinery', path: '#' },
-          { title: 'Machinery for Food, Beverage & Cereal', path: '#' },
-          { title: 'Laser Equipment', path: '#' },
-          { title: 'Mould', path: '#' },
-          { title: 'Textile Machinery & Parts', path: '#' },
-          { title: 'Cutting & Fold-bend Machine', path: '#' },
-          { title: 'Paper Machinery', path: '#' },
-          { title: 'Rubber Machinery', path: '#' },
-          { title: 'Chemical Equipment & Machinery', path: '#' },
-          { title: 'Mixing Equipment', path: '#' },
-          { title: 'Machinery for Garment, Shoes & Accessories', path: '#' },
-          { title: 'Crushing & Culling Machine', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Plastic & Woodworking',
-        items: [
-          { title: 'Plastic Machinery', path: '#' },
-          { title: 'Woodworking Machinery', path: '#' },
-          { title: 'Blow Molding Machine', path: '#' },
-          { title: 'Plastic Recycling Machine', path: '#' },
-          { title: 'Injection Molding Machine', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Construction Machinery',
-        items: [
-          { title: 'Building Material Making Machinery', path: '#' },
-          { title: 'Lifting Equipment', path: '#' },
-          { title: 'Excavator', path: '#' },
-          { title: 'Concrete Machinery', path: '#' },
-          { title: 'Stone Processing Machinery', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Agriculture Machinery',
-        items: [
-          { title: 'Agriculture Machinery', path: '#' },
-          { title: 'Livestock MachineryFeed', path: '#' },
-          { title: 'Feed Processing Machinery', path: '#' },
-          { title: 'Tiller', path: '#' },
-          { title: 'Harvesting Machine', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Machine Tools',
-        items: [
-          { title: 'CNC Machine Tools', path: '#' },
-          { title: 'Lathe', path: '#' },
-          { title: 'Grinding Machine ', path: '#' },
-          { title: 'Drilling Machine ', path: '#' },
-          { title: 'Milling Machine ', path: '#' },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Item 2',
-    path: '#',
-    icon: <Iconify icon="carbon:airplay" sx={{ width: 1, height: 1 }} />,
-    children: [
-      {
-        subheader: 'Other Machinery & Parts',
-        items: [
-          { title: 'Metallic Processing Machinery', path: '#' },
-          { title: 'Machinery for Food, Beverage & Cereal', path: '#' },
-          { title: 'Laser Equipment', path: '#' },
-          { title: 'Mould', path: '#' },
-          { title: 'Textile Machinery & Parts', path: '#' },
-          { title: 'Cutting & Fold-bend Machine', path: '#' },
-          { title: 'Paper Machinery', path: '#' },
-          { title: 'Rubber Machinery', path: '#' },
-          { title: 'Chemical Equipment & Machinery', path: '#' },
-          { title: 'Mixing Equipment', path: '#' },
-          { title: 'Machinery for Garment, Shoes & Accessories', path: '#' },
-          { title: 'Crushing & Culling Machine', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Plastic & Woodworking',
-        items: [
-          { title: 'Plastic Machinery', path: '#' },
-          { title: 'Woodworking Machinery', path: '#' },
-          { title: 'Blow Molding Machine', path: '#' },
-          { title: 'Plastic Recycling Machine', path: '#' },
-          { title: 'Injection Molding Machine', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Construction Machinery',
-        items: [
-          { title: 'Building Material Making Machinery', path: '#' },
-          { title: 'Lifting Equipment', path: '#' },
-          { title: 'Excavator', path: '#' },
-          { title: 'Concrete Machinery', path: '#' },
-          { title: 'Stone Processing Machinery', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Agriculture Machinery',
-        items: [
-          { title: 'Agriculture Machinery', path: '#' },
-          { title: 'Livestock MachineryFeed', path: '#' },
-          { title: 'Feed Processing Machinery', path: '#' },
-          { title: 'Tiller', path: '#' },
-          { title: 'Harvesting Machine', path: '#' },
-        ],
-      },
-      {
-        subheader: 'Machine Tools',
-        items: [
-          { title: 'CNC Machine Tools', path: '#' },
-          { title: 'Lathe', path: '#' },
-          { title: 'Grinding Machine ', path: '#' },
-          { title: 'Drilling Machine ', path: '#' },
-          { title: 'Milling Machine ', path: '#' },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Item 3',
-    path: '#',
-    icon: <Iconify icon="carbon:api" sx={{ width: 1, height: 1 }} />,
-    children: [
-      {
-        subheader: '',
-        items: [
-          { title: 'Metallic Processing Machinery', path: '#' },
-          { title: 'Machinery for Food, Beverage & Cereal', path: '#' },
-          { title: 'Laser Equipment', path: '#' },
-          { title: 'Mould', path: '#' },
-          { title: 'Textile Machinery & Parts', path: '#' },
-          { title: 'Cutting & Fold-bend Machine', path: '#' },
-          { title: 'Paper Machinery', path: '#' },
-          { title: 'Rubber Machinery', path: '#' },
-          { title: 'Chemical Equipment & Machinery', path: '#' },
-          { title: 'Mixing Equipment', path: '#' },
-          { title: 'Machinery for Garment, Shoes & Accessories', path: '#' },
-          { title: 'Crushing & Culling Machine', path: '#' },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Item 4',
-    path: 'https://www.google.com/',
-    icon: <Iconify icon="carbon:basketball" sx={{ width: 1, height: 1 }} />,
-  },
-];

package/minimal/src/sections/_examples/extra/multi-language-view.jsx

@@ -1,124 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-
-import Box from '@mui/material/Box';
-import Card from '@mui/material/Card';
-import Radio from '@mui/material/Radio';
-import Stack from '@mui/material/Stack';
-import Container from '@mui/material/Container';
-import CardHeader from '@mui/material/CardHeader';
-import Typography from '@mui/material/Typography';
-import RadioGroup from '@mui/material/RadioGroup';
-import TablePagination from '@mui/material/TablePagination';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-import { paths } from 'src/routes/paths';
-
-import { useLocales, useTranslate } from 'src/locales';
-
-import Iconify from 'src/components/iconify';
-import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
-
-// ----------------------------------------------------------------------
-
-export default function MultiLanguageView() {
-  const { t, onChangeLang } = useTranslate();
-
-  const { allLangs, currentLang } = useLocales();
-
-  const [mounted, setMounted] = useState(false);
-
-  const [page, setPage] = useState(2);
-
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-
-  useEffect(() => setMounted(true), []);
-
-  const handleChangePage = useCallback((event, newPage) => {
-    setPage(newPage);
-  }, []);
-
-  const handleChangeRowsPerPage = useCallback((event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  }, []);
-
-  return (
-    <>
-      <Box
-        sx={{
-          py: 5,
-          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
-        }}
-      >
-        <Container>
-          <CustomBreadcrumbs
-            heading="Multi Language"
-            links={[
-              {
-                name: 'Components',
-                href: paths.components,
-              },
-              { name: 'Multi Language' },
-            ]}
-            moreLink={[
-              'https://react.i18next.com',
-              'https://mui.com/guides/localization/#main-content',
-            ]}
-          />
-        </Container>
-      </Box>
-
-      <Container sx={{ my: 10 }}>
-        <Stack spacing={5}>
-          <Card>
-            <CardHeader title="Flexible" />
-
-            <Box sx={{ p: 3 }}>
-              <RadioGroup
-                row
-                value={currentLang.value}
-                onChange={(event) => onChangeLang(event.target.value)}
-              >
-                {allLangs.map((lang) => (
-                  <FormControlLabel
-                    key={lang.label}
-                    value={lang.value}
-                    label={lang.label}
-                    control={<Radio />}
-                  />
-                ))}
-              </RadioGroup>
-
-              <Stack direction="row" alignItems="center" sx={{ typography: 'h2', my: 3 }}>
-                <Iconify icon={currentLang.icon} width={32} sx={{ mr: 1, borderRadius: 1 }} />
-                {mounted && t('demo.title')}
-              </Stack>
-
-              <Typography>
-                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
-                hymenaeos. Praesent ac massa at ligula laoreet iaculis. Vivamus in erat ut urna
-                cursus vestibulum. In ac felis quis tortor malesuada pretium. Nulla porta dolor. Sed
-                consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi
-                a libero. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id
-                fringilla neque ante vel mi. Cras varius. Nunc nec neque. Phasellus tempus.
-              </Typography>
-            </Box>
-          </Card>
-
-          <Card>
-            <CardHeader title="System" sx={{ pb: 2 }} />
-
-            <TablePagination
-              component="div"
-              count={100}
-              page={page}
-              onPageChange={handleChangePage}
-              rowsPerPage={rowsPerPage}
-              onRowsPerPageChange={handleChangeRowsPerPage}
-            />
-          </Card>
-        </Stack>
-      </Container>
-    </>
-  );
-}