@canmingir/link 1.1.0

package/minimal/src/sections/_examples/mui/transfer-list-view/simple-transfer-list.jsx

@@ -0,0 +1,154 @@
+import { useState } from 'react';
+
+import List from '@mui/material/List';
+import Card from '@mui/material/Card';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import Grid from '@mui/material/Unstable_Grid2';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemButton from '@mui/material/ListItemButton';
+
+import Iconify from 'src/components/iconify';
+
+// ----------------------------------------------------------------------
+
+function not(a, b) {
+  return a.filter((value) => b.indexOf(value) === -1);
+}
+
+function intersection(a, b) {
+  return a.filter((value) => b.indexOf(value) !== -1);
+}
+
+// ----------------------------------------------------------------------
+
+export default function SimpleTransferList() {
+  const [checked, setChecked] = useState([]);
+
+  const [left, setLeft] = useState([0, 1, 2, 3]);
+
+  const [right, setRight] = useState([4, 5, 6, 7]);
+
+  const leftChecked = intersection(checked, left);
+
+  const rightChecked = intersection(checked, right);
+
+  const handleToggle = (value) => () => {
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+    setChecked(newChecked);
+  };
+
+  const handleAllRight = () => {
+    setRight(right.concat(left));
+    setLeft([]);
+  };
+
+  const handleCheckedRight = () => {
+    setRight(right.concat(leftChecked));
+    setLeft(not(left, leftChecked));
+    setChecked(not(checked, leftChecked));
+  };
+
+  const handleCheckedLeft = () => {
+    setLeft(left.concat(rightChecked));
+    setRight(not(right, rightChecked));
+    setChecked(not(checked, rightChecked));
+  };
+
+  const handleAllLeft = () => {
+    setLeft(left.concat(right));
+    setRight([]);
+  };
+
+  const customList = (items) => (
+    <Card
+      sx={{
+        width: 200,
+        height: 220,
+        overflow: 'auto',
+        borderRadius: 1.5,
+      }}
+    >
+      <List dense component="div" role="list">
+        {items.map((value) => {
+          const labelId = `transfer-list-item-${value}-label`;
+          return (
+            <ListItemButton key={value} role="listitem" onClick={handleToggle(value)}>
+              <ListItemIcon>
+                <Checkbox
+                  checked={checked.indexOf(value) !== -1}
+                  tabIndex={-1}
+                  disableRipple
+                  inputProps={{ 'aria-labelledby': labelId }}
+                />
+              </ListItemIcon>
+              <ListItemText id={labelId} primary={`List item ${value + 1}`} />
+            </ListItemButton>
+          );
+        })}
+      </List>
+    </Card>
+  );
+
+  return (
+    <Grid container justifyContent="center" alignItems="center" sx={{ width: 'auto', py: 3 }}>
+      <Grid>{customList(left)}</Grid>
+
+      <Grid container direction="column" alignItems="center" sx={{ p: 3 }}>
+        <Button
+          color="inherit"
+          variant="outlined"
+          size="small"
+          onClick={handleAllRight}
+          disabled={left.length === 0}
+          aria-label="move all right"
+          sx={{ my: 1 }}
+        >
+          <Iconify icon="eva:arrowhead-right-fill" width={18} />
+        </Button>
+        <Button
+          color="inherit"
+          variant="outlined"
+          size="small"
+          onClick={handleCheckedRight}
+          disabled={leftChecked.length === 0}
+          aria-label="move selected right"
+          sx={{ my: 1 }}
+        >
+          <Iconify icon="eva:arrow-ios-forward-fill" width={18} />
+        </Button>
+        <Button
+          color="inherit"
+          variant="outlined"
+          size="small"
+          onClick={handleCheckedLeft}
+          disabled={rightChecked.length === 0}
+          aria-label="move selected left"
+          sx={{ my: 1 }}
+        >
+          <Iconify icon="eva:arrow-ios-back-fill" width={18} />
+        </Button>
+        <Button
+          color="inherit"
+          variant="outlined"
+          size="small"
+          onClick={handleAllLeft}
+          disabled={right.length === 0}
+          aria-label="move all left"
+          sx={{ my: 1 }}
+        >
+          <Iconify icon="eva:arrowhead-left-fill" width={18} />
+        </Button>
+      </Grid>
+
+      <Grid>{customList(right)}</Grid>
+    </Grid>
+  );
+}

package/minimal/src/sections/_examples/view.jsx

@@ -0,0 +1,120 @@
+import PropTypes from 'prop-types';
+import orderBy from 'lodash/orderBy';
+
+import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+
+import ComponentHero from './component-hero';
+import ComponentCard from './component-card';
+import { muiNav, extraNav, foundationNav } from './config-navigation';
+
+// ----------------------------------------------------------------------
+
+export default function ComponentsView() {
+  return (
+    <>
+      <ComponentHero />
+
+      <Container sx={{ pt: 10, pb: 15 }}>
+        <Stack spacing={3}>
+          <Stack spacing={1}>
+            <Typography variant="h5">Foundation</Typography>
+
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              Colors, Typography, Shadows…
+            </Typography>
+          </Stack>
+
+          <Grid>
+            {foundationNav.map((item) => (
+              <ComponentCard key={item.name} item={item} />
+            ))}
+          </Grid>
+        </Stack>
+
+        <Divider sx={{ borderStyle: 'dashed', my: 8 }} />
+
+        <Stack spacing={3}>
+          <Stack spacing={1}>
+            <Typography variant="h5">MUI</Typography>
+
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              Components from{' '}
+              <Link href="https://mui.com/components/" target="_blank" rel="noopener">
+                Material UI
+              </Link>
+              .
+            </Typography>
+
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+              <i>
+                Some advanced components from MUI X will not be included. So you need to purchase a
+                separate
+                <Link
+                  href="https://mui.com/pricing/"
+                  target="_blank"
+                  rel="noopener"
+                  sx={{ ml: 0.5 }}
+                >
+                  license
+                </Link>
+                .
+              </i>
+            </Typography>
+          </Stack>
+
+          <Grid>
+            {orderBy(muiNav, ['name'], ['asc']).map((item) => (
+              <ComponentCard key={item.name} item={item} />
+            ))}
+          </Grid>
+        </Stack>
+
+        <Divider sx={{ borderStyle: 'dashed', my: 8 }} />
+
+        <Stack spacing={3}>
+          <Stack spacing={1}>
+            <Typography variant="h5">Extra Components</Typography>
+
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              Some custom components / use 3rd party dependencies (chart, map, editor…).
+            </Typography>
+          </Stack>
+
+          <Grid>
+            {extraNav.map((item) => (
+              <ComponentCard key={item.name} item={item} />
+            ))}
+          </Grid>
+        </Stack>
+      </Container>
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function Grid({ children }) {
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={{
+        xs: 'repeat(2, 1fr)',
+        sm: 'repeat(3, 1fr)',
+        md: 'repeat(4, 1fr)',
+        lg: 'repeat(6, 1fr)',
+      }}
+      gap={2.5}
+    >
+      {children}
+    </Box>
+  );
+}
+
+Grid.propTypes = {
+  children: PropTypes.node,
+};

package/minimal/src/sections/about/about-hero.jsx

@@ -0,0 +1,93 @@
+import { m } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+
+import { varFade, MotionContainer } from 'src/components/animate';
+
+// ----------------------------------------------------------------------
+
+export default function AboutHero() {
+  return (
+    <Box
+      sx={{
+        height: { md: 560 },
+        py: { xs: 10, md: 0 },
+        overflow: 'hidden',
+        position: 'relative',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundImage:
+          'url(/assets/background/overlay_1.svg), url(/assets/images/about/hero.jpg)',
+      }}
+    >
+      <Container component={MotionContainer}>
+        <Box
+          sx={{
+            bottom: { md: 80 },
+            position: { md: 'absolute' },
+            textAlign: {
+              xs: 'center',
+              md: 'unset',
+            },
+          }}
+        >
+          <TextAnimate text="Who" variants={varFade().inRight} sx={{ color: 'primary.main' }} />
+
+          <br />
+
+          <Stack spacing={2} display="inline-flex" direction="row" sx={{ color: 'common.white' }}>
+            <TextAnimate text="we" />
+            <TextAnimate text="are?" />
+          </Stack>
+
+          <m.div variants={varFade().inRight}>
+            <Typography
+              variant="h4"
+              sx={{
+                mt: 3,
+                color: 'common.white',
+                fontWeight: 'fontWeightSemiBold',
+              }}
+            >
+              Let&apos;s work together and
+              <br /> make awesome site easily
+            </Typography>
+          </m.div>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function TextAnimate({ text, variants, sx, ...other }) {
+  return (
+    <Box
+      component={m.div}
+      sx={{
+        typography: 'h1',
+        overflow: 'hidden',
+        display: 'inline-flex',
+        ...sx,
+      }}
+      {...other}
+    >
+      {text.split('').map((letter, index) => (
+        <m.span key={index} variants={variants || varFade().inUp}>
+          {letter}
+        </m.span>
+      ))}
+    </Box>
+  );
+}
+
+TextAnimate.propTypes = {
+  sx: PropTypes.object,
+  text: PropTypes.string,
+  variants: PropTypes.object,
+};

package/minimal/src/sections/about/about-team.jsx

@@ -0,0 +1,158 @@
+import { m } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { alpha } from '@mui/material/styles';
+import Container from '@mui/material/Container';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+
+import { _socials, _carouselsMembers } from 'src/_mock';
+
+import Image from 'src/components/image';
+import Iconify from 'src/components/iconify';
+import { varFade, MotionViewport } from 'src/components/animate';
+import Carousel, { useCarousel, CarouselArrows } from 'src/components/carousel';
+
+// ----------------------------------------------------------------------
+
+export default function AboutTeam() {
+  const carousel = useCarousel({
+    infinite: false,
+    slidesToShow: 4,
+    responsive: [
+      {
+        breakpoint: 1279,
+        settings: { slidesToShow: 3 },
+      },
+      {
+        breakpoint: 959,
+        settings: { slidesToShow: 2 },
+      },
+      {
+        breakpoint: 600,
+        settings: { slidesToShow: 1 },
+      },
+    ],
+  });
+
+  return (
+    <Container component={MotionViewport} sx={{ textAlign: 'center', py: { xs: 10, md: 15 } }}>
+      <m.div variants={varFade().inDown}>
+        <Typography variant="overline" sx={{ color: 'text.disabled' }}>
+          Dream team
+        </Typography>
+      </m.div>
+
+      <m.div variants={varFade().inUp}>
+        <Typography variant="h2" sx={{ my: 3 }}>
+          Great team is the key
+        </Typography>
+      </m.div>
+
+      <m.div variants={varFade().inUp}>
+        <Typography
+          sx={{
+            mx: 'auto',
+            maxWidth: 640,
+            color: 'text.secondary',
+          }}
+        >
+          Minimal will provide you support if you have any problems, our support team will reply
+          within a day and we also have detailed documentation.
+        </Typography>
+      </m.div>
+
+      <Box sx={{ position: 'relative' }}>
+        <CarouselArrows
+          filled
+          shape="rounded"
+          onNext={carousel.onNext}
+          onPrev={carousel.onPrev}
+          leftButtonProps={{
+            sx: {
+              left: 24,
+              ...(_carouselsMembers.length < 5 && { display: 'none' }),
+            },
+          }}
+          rightButtonProps={{
+            sx: {
+              right: 24,
+              ...(_carouselsMembers.length < 5 && { display: 'none' }),
+            },
+          }}
+        >
+          <Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
+            {_carouselsMembers.map((member) => (
+              <Box
+                key={member.id}
+                component={m.div}
+                variants={varFade().in}
+                sx={{
+                  px: 1.5,
+                  py: { xs: 8, md: 10 },
+                }}
+              >
+                <MemberCard member={member} />
+              </Box>
+            ))}
+          </Carousel>
+        </CarouselArrows>
+      </Box>
+
+      <Button
+        size="large"
+        color="inherit"
+        variant="outlined"
+        endIcon={<Iconify icon="eva:arrow-ios-forward-fill" width={24} />}
+        sx={{ mx: 'auto' }}
+      >
+        All Members
+      </Button>
+    </Container>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function MemberCard({ member }) {
+  const { name, role, avatarUrl } = member;
+  return (
+    <Card key={name}>
+      <Typography variant="subtitle1" sx={{ mt: 2.5, mb: 0.5 }}>
+        {name}
+      </Typography>
+
+      <Typography variant="body2" sx={{ mb: 2.5, color: 'text.secondary' }}>
+        {role}
+      </Typography>
+
+      <Box sx={{ px: 1 }}>
+        <Image alt={name} src={avatarUrl} ratio="1/1" sx={{ borderRadius: 2 }} />
+      </Box>
+
+      <Stack direction="row" alignItems="center" justifyContent="center" sx={{ p: 2 }}>
+        {_socials.map((social) => (
+          <IconButton
+            key={social.name}
+            sx={{
+              color: social.color,
+              '&:hover': {
+                bgcolor: alpha(social.color, 0.08),
+              },
+            }}
+          >
+            <Iconify icon={social.icon} />
+          </IconButton>
+        ))}
+      </Stack>
+    </Card>
+  );
+}
+
+MemberCard.propTypes = {
+  member: PropTypes.object,
+};