DEV Community: sayantan chakraborty

can anyone suggest an easiest way of using aws lex in nextjs?

sayantan chakraborty — Tue, 27 Sep 2022 11:11:54 +0000

can anyone suggest an easiest way of using aws lex in nextjs to create an automated chat box?

it transit in like any menu or mega-menu (containerRef) easy pizzy === `it's pizza time`

sayantan chakraborty — Tue, 27 Sep 2022 10:46:16 +0000

lots of guys think simple popup would do; lot's guys think modal would do but I think a is more generic way to achieve it ; however it is never ending saga.

import * as React from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import Paper from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import FormControlLabel from '@mui/material/FormControlLabel';
import { Card } from '@mui/material';

export default function SimpleSlide() {
  const [checked, setChecked] = React.useState(false);
  //const [checked, setChecked] = React.useState(false);
  const containerRef = React.useRef(null);
  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  return (
    <Box sx={{ height: 'fit-content' }}>
      <Box sx={{ width: `fit-content` }} ref={containerRef}>
          <Box onClick={handleChange}>my hero </Box>

        <Slide direction="up" container={containerRef.current} in={checked} mountOnEnter unmountOnExit>
      <Card sx={{ m: 1 }} elevation={1}>
    <Box  component="svg" sx={{ width: 100, height: 100 }}>
      <Box
        component="polygon"
        sx={{
          fill: (theme) => theme.palette.common.red,
          stroke: (theme) => theme.palette.divider,
          strokeWidth: 1,
        }}
        points="0,0 50,50, 100,100, 0,100"
      />
    </Box>
  </Card>
        </Slide>
      </Box>
    </Box>
  );
}

Replace the code from this card and put you menu and menu item into this to achieve a mega menu

<Card sx={{ m: 1 }} elevation={1}>
    <Box  component="svg" sx={{ width: 100, height: 100 }}>
      <Box
        component="polygon"
        sx={{
          fill: (theme) => theme.palette.common.red,
          stroke: (theme) => theme.palette.divider,
          strokeWidth: 1,
        }}
        points="0,0 50,50, 100,100, 0,100"
      />
    </Box>
  </Card>

Ref Link : it is world famous MUI ; it's back as it was never left us behind

But in a React Grid it seems little messy : still it does a job what it is meant to be

import * as React from 'react';
import PropTypes from 'prop-types';
import IconButton from '@mui/material/IconButton';
//import Grid from '@mui/material/Grid'; // Grid version 1
import Grid2 from '@mui/material/Unstable_Grid2';
import { styled, alpha } from '@mui/material/styles';
//import Image from '@mui/material/Image';
import { Slide, Popover, Grid, ClickAwayListener, Grow, Button, MenuList, ButtonGroup, Container, Toolbar, Typography, CssBaseline, Paper, Box, AppBar, Popper } from '@mui/material';
import MuiLink from '@mui/material/Link';
import Badge from '@mui/material/Badge';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import HomeIcon from '@mui/icons-material/Home';
import SearchIcon from '@mui/icons-material/Search';
import AccountCircle from '@mui/icons-material/AccountCircle';
import MailIcon from '@mui/icons-material/Mail';
import NotificationsIcon from '@mui/icons-material/Notifications';
import MoreIcon from '@mui/icons-material/MoreVert';
import useScrollTrigger from '@mui/material/useScrollTrigger';
import * as Colors from '@mui/material/colors';
import Image from 'next/image';
import ViewCompactRoundedIcon from '@mui/icons-material/ViewCompactRounded';
import BrokenComponantTabbes from '../src/BrokenComponantTabbes'


// Note that you normally won't need to set the window ref as useScrollTrigger
// will defau



const options = ['View Accounts', 'Contact Sales', 'Logedin users']




const ConditionalWrapper = ({ children, condition }) => {
  return condition ? (
    <div>{children}</div>
  ) : (
    children
  )
}


const Navigations = () => {
  //const brown = brown[900];
  const [clicked, setClicked] = React.useState(false);
  const containerRef = React.useRef(null);
  const handleChange = () => {
    setClicked((prev) => !prev);
  };

  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleClick = () => {
    console.info(`You clicked ${options[selectedIndex]}`);
  };

  const handleMenuItemClick = (event, index) => {
    setSelectedIndex(index);
    setOpen(false);
  };

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  const [anchorEl, setAnchorEl] = React.useState(null);
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

  const handleProfileMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMobileMenuClose = () => {
    setMobileMoreAnchorEl(null);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
    handleMobileMenuClose();
  };

  const handleMobileMenuOpen = (event) => {
    setMobileMoreAnchorEl(event.currentTarget);
  };

  const menuId = 'primary-search-account-menu';
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      id={menuId}
      keepMounted
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <MenuItem onClick={handleMenuClose}>Profile</MenuItem>
      <MenuItem onClick={handleMenuClose}>My account</MenuItem>
    </Menu>
  );

  const mobileMenuId = 'primary-search-account-menu-mobile';
  const renderMobileMenu = (
    <Menu
      anchorEl={mobileMoreAnchorEl}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      id={mobileMenuId}
      keepMounted
      transformOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      open={isMobileMenuOpen}
      onClose={handleMobileMenuClose}
    >
    </Menu>
  );


  return (
    <React.Fragment>
      <CssBaseline />
      <Toolbar sx={{ zIndex: 1 }}>

        <Grid container spacing={7} sx={{ textAlign: "center", verticalAlign: "middle" }} >
          <Grid item xs sx={{ display: 'flex' }}  >
            <item> <Image src="/favicon.ico" alt="lol" width="260" height="50" padding='50 0 0' /> </item>
          </Grid>
        </Grid>
      </Toolbar>
      <AppBar position="sticky" maxWidth="sm" sx={{ verticalAlign: "middle", textAlign: 'center', display: 'flex', lineHeight: '10px', justifyContent: 'flex-end', top: 'auto', bottom: 7, px: 'auto', color: '#3a3632', fontcolor: '#faf8f7' }}>
        <Toolbar sx={{ display: 'flex' }} >
          <Grid container spacing={7} sx={{ textAlign: "center", verticalAlign: "middle" }} >

            <Grid item xs sx={{ display: 'flex' }}  >

              <item>
                <IconButton
                  size="large"
                  edge="start"
                  color="inherit"
                  aria-label="open drawer"
                  sx={{ mr: 2, hover: "outline - 2", pl: 2 }}
                >
                  <ViewCompactRoundedIcon sx={{ color: '#F1EFED' }} />
                </IconButton>
              </item>
            </Grid>
            <Grid item xs sx={{ color: '#F1EFED', ml: '5rem' }} ref={containerRef}>

              <item onClick={handleChange} > <Typography variant="h6" >Product</Typography>

              </item>

            </Grid>

            <Grid item xs sx={{ color: '#F1EFED', ml: '-5rem' }}>
              <item> <Typography variant="h6" sx={{ color: '#F1EFED' }}>Service</Typography></item>
            </Grid>

            <Grid item xs sx={{ color: '#F1EFED', ml: '-5rem' }}>
              <item> <Typography variant="h6" >Development</Typography></item>
            </Grid>


            <Grid item xs sx={{ color: '#F1EFED', ml: '-5em' }}>
              <item> <Typography variant="h6" >Contact US</Typography></item>
            </Grid>

            <Grid item xs sx={{ color: '#F1EFED', ml: '-5rem' }}>
              <item> <Typography variant="h6" >About US</Typography></item>
            </Grid>
            {/* <Typography variant="h6" gutterBottom component="div" sx={{ p: 2, pb: 0, top: 'auto', bottom: 2 }}>
            <MuiLink color="inherit" href="/">
              <HomeIcon sx={{ color: '#faf8f7' }} /> Home
            </MuiLink>{' '} 

          </Typography>  */}

            <Grid item xs sx={{ justifyContent: 'flex-end' }}>

              <item>
                <Box sx={{ flexGrow: 1, backgroundColor: '#3a3632' }} />
                <Box position='left' sx={{ display: { xs: 'none', md: 'flex' } }}>
                  <ButtonGroup variant="contained" ref={anchorRef} aria-label="split button" >
                    <Button onClick={handleClick} sx={{ color: '#faf8f7', border: 2, backgroundColor: '#3a3632' }}>{options[selectedIndex]}</Button>
                    <Button
                      size="small"
                      aria-controls={open ? 'split-button-menu' : undefined}
                      aria-expanded={open ? 'true' : undefined}
                      aria-label="select merge strategy"
                      aria-haspopup="menu"
                      onClick={handleToggle}
                    >
                      <ArrowDropDownIcon sx={{ color: '#faf8f7' }} />
                    </Button>
                  </ButtonGroup>
                  <Popper
                    sx={{
                      zIndex: 1, width: '20%', justifyContent: 'flex-end', aligntext: 'middle', backgroundColor: '#3a3632'
                    }}
                    open={open}
                    anchorEl={anchorRef.current}
                    role={undefined}
                    transition
                    disablePortal
                  >
                    {({ TransitionProps, placement }) => (
                      <Grow sx={{ zIndex: '10' }}
                        {...TransitionProps}
                        style={{
                          transformOrigin:
                            placement === 'bottom' ? 'center top' : 'center bottom',
                        }}
                      >
                        <Paper sx={{ height: '100%', backgroundColor: '#3a3632', color: '#faf8f7' }}>
                          <ClickAwayListener onClickAway={handleClose}>
                            <MenuList id="split-button-menu" autoFocusItem sx={{ color: '#faf8f7', backgroundColor: '#3a3632', textColor: '#faf8f7' }}>
                              {options.map((option, index) => (
                                <MenuItem
                                  key={option}
                                  disabled={index === 2}
                                  selected={index === selectedIndex}
                                  onClick={(event) => handleMenuItemClick(event, index)}
                                >
                                  {option}
                                </MenuItem>
                              ))}
                            </MenuList>
                          </ClickAwayListener>
                        </Paper>
                      </Grow>
                    )}
                  </Popper>

                </Box>
              </item>           </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
      <Grid sx={{ width: '100%' , height: '100%', backgroundColor: '#3a3632', color: '#faf8f7', zIndex: 1 }}> <Slide direction="down" in={clicked} container={containerRef.current} mountOnEnter unmountOnExit>
        <Box> <BrokenComponantTabbes /> </Box>

      </Slide>
      </Grid>



    </React.Fragment>
  );
}


export default Navigations

Just a css grid that slides in

sayantan chakraborty — Sun, 18 Sep 2022 18:13:35 +0000

import * as React from 'react';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';
import Paper from '@mui/material/Paper';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import { Card, Grid, Typography } from '@mui/material';
import { red } from '@mui/material/colors';

const icon = (
  <Box
  sx={{
    display: 'grid',
    gridAutoFlow: 'row',
    gridTemplateColumns: 'repeat(4, 1fr)',
  //  gridTemplateRows: 'repeat(2, 50px)',
    gap: 0.02,
  }}
>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  <item>  <Card sx={{ m: 1 }}>
    <Box component="container" sx={{ width: '100%', height: '100%' }}>
 <Typography sx={{color: 'ButtonShadow' ,width: '100%' }}>    sliding menu </Typography>
    </Box>
  </Card> </item>
  </Box>
);

export default function SimpleSlide() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  return (
    <Box sx={{ height: 180 }}>
      <Box sx={{ width: `calc(100px + 16px)` }}>
        <Button
        onClick={handleChange}
          label="Show"
        > click me </Button>
        <Slide direction="right" in={checked} mountOnEnter unmountOnExit>
          {icon}
        </Slide>
      </Box>
    </Box>
  );
}

awesome meterial based gid :P

can anyone suggest about a reader narrative button like medium

sayantan chakraborty — Sun, 18 Sep 2022 10:33:04 +0000

the great medium dot com has a buttons that reads out the text of the whole website ? is there ant react component available that can read them ? i guess there must be something like that available. if it is not available through any matarial ui / react library can anyone suggest how to create such from the scratch?

this button will be most welcomed for the low visioned people so let me know the details about it.

theme.js while using MUI in nextjs project

sayantan chakraborty — Sat, 17 Sep 2022 17:18:42 +0000

Theming Mui

this offer a theming methods but from react 18 and next i never able to use theme.js in my system. this below button's styling works for me but i need re-usability of such css.

 <Button css={css` 
  display: flex;
  align-items: center;
  justify-content: center;                          
  background-color: black;
  color: white;
  font-size: 10px;
  padding: 10px 60px;
  border-radius: 5px;
  margin: 10px 0px;
  cursor: pointer;
  margin-left: 10px;
  :hover {
            color: #3e2723;
            border:2px solid #3e2723;
            border-color: #3e2723;
            transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out .7s;
          }
`}>  Click for More </Button>

Home.getInitialProps()" should resolve to an object. But found "undefined" instead

sayantan chakraborty — Sat, 17 Sep 2022 11:22:42 +0000



Home.getInitialProps = async ctx => {
  /*  try {

    const res = await axios.get('http://localhost:1337/api/' + 'pages');
    const Pages = res.data;
//    console.log(Pages);     
    return { Pages};
  //  return { HomeAccordition };
  } catch (error) {
    return { error };
  }
*/
  let Pages =
  "'http://localhost:1337/api/' + 'pages'";
let homeAaccorditions =
  "'http://localhost:1337/api/' + 'home-accorditions'";
let Menus =
  "'http://localhost:1337/api/' + 'menus'";

let HeroSections =
 "'http://localhost:1337/api/' + 'hero-sections'";
const requestPages = axios.get(Pages);
const requesthomeAaccorditions = axios.get(homeAaccorditions);
const requestMenus = axios.get(Menus);
const requestHeroSections = axios.get(HeroSections);

axios
  .all([requestPages, requesthomeAaccorditions, requestMenus, requestHeroSections])
  .then(
    axios.spread((...responses) => {
      const requestPages = responses[0];
      const requesthomeAaccorditions = responses[1];
      const requestMenus = responses[2];
      const requestHeroSections = responses[3];

      // use/access the results

      console.log(requestPages, requesthomeAaccorditions, requestMenus, requestHeroSections );
    })
  )
  .catch(errors => {
    // react on errors.
    console.error(errors);
  });

};

export default Home;
//Home.getInitialProps = getInitialProps;

looking for a easy solutions to this. i was intended to return these responses so that we can call them in a component