@canmingir/link 1.1.0

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

@@ -0,0 +1,204 @@
+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

@@ -0,0 +1,318 @@
+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

@@ -0,0 +1,124 @@
+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>
+    </>
+  );
+}