DEV Community: Chittoji Murali Sree Krishna

when i am using next-auth i am getting this error in typescript, does anyone know what is it ?

Chittoji Murali Sree Krishna — Wed, 02 Aug 2023 10:28:03 +0000

*Error: Package subpath './providers/google' is not defined by "exports" in D:\entrego_recent\dvp-athena\node_modules\next-authpackage.json, *

the above error i am getting when i was trying to use GoogleProvider from 'next-auth/providers/google'

i followed everything as documentation but i dont know why i am getting this error

Responsive Navbar @material-ui, react-router-dom

Chittoji Murali Sree Krishna — Mon, 17 May 2021 16:34:34 +0000

I have done a Responsive navbar with material-ui and react-router-dom,

App.js

dependencies used:

npm install @material-ui/core
npm install @material-ui/icons
npm install @fontsource/roboto
npm install react-router-dom

customizing the theme

To customize the theme we have to import these modules first:

import Header from "./Components/Header";
// to use fontRoboto
import "fontsource-roboto";
// importing paper and container from core
import { Paper, Container } from "@material-ui/core";

// these are for customizing the theme
import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
/* material shell also provide the colors we can import them like these */
import { green, orange } from "@material-ui/core/colors";

Customize the theme we have to create the variable with createMuiTheme:

const theme = createMuiTheme({
  typography: {
    h1: {
     /* this will change the font size for h1, we can also do 
        it for others, */
      fontSize: "3rem",
    },
  },
  palette: {
    /* this is used to turn the background dark, but we have 
        to use Paper for this inOrder to use it. */
    type: "dark",
    primary: {
     // main: colorName[hue],
     // we have to import the color first to use it
      main: green[600],
    },
    secondary: {
      main: orange[400],
    },
  },
});

now we have to wrap the components we use with ThemeProvider and now we pass the variable as prop to this

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Paper style={{ height: "200vh" }}>
        <Container>
          <Header />
        </Container>
      </Paper>
    </ThemeProvider>
  );
}

export default App;

the things which are inside the ThemeProvider can use the newly created theme

NavBar Starts from here

Header.js

TO use the
navgation bar with material-ui, we have to import {AppBar}, and using {ToolBar} for extra padding,
for making the nav bar responsive we have to use {useMediaQuery} for break the screen with breakpoints
to use the dropMenu we have to import {Menu, MenuItem}

For breaking the screen width in material-ui we can use px or buitin sizes ex: {xl,lg,mg,sm,xs} we are assigning a new variable and making it as boolean type:

import React from "react"
import { AppBar, Toolbar, Typography, useMediaQuery, Menu, MenuItem, Button } from "@material-ui/core"
import MenuIcon from "@material-ui/icons/Menu";

const Example () => {
/* Creating 2 variables for opening and closing the menu for mobile version */
const [anchor, setAnchor] = React.useState(null);
const open = Boolean(anchor);

/* Creating a function to handle manu: */
const handleMenu = (event) => {
    setAnchor(event.currentTarget);
 };

const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
return(
<Appbar>
<Toolbar>
<Typography>
Example
</Typography>
{isMobile ? (<>
<IconButton onClick={handleMenu}>
<MenuIcon />
</IconButton>
<Menu
   id="menu-appbar"
   /* to open the anchor at the top below the cursor */
   anchorEl={anchor}
   /* anchor origin so that it open it that location */
   anchorOrigin={{
   vertical: "top",
   horizontal: "right"
   }}
   KeepMounted
   transformOrigin={{
   vertical: "top",
   horizontal: "right"
   }}
   open={open}
   >
   <MenuItem
   onClick={() => setAnchor(null)}
   >
  <ListItemIcon>
  <HomeIcon />
  </ListItemIcon>
  <Typography variant="h6"> Home</Typography>
  </MenuItem>
</Menu>
</>) : (<Button>Home</Button>)}
</Toolbar>
</Appbar>
)
}
export default Example

to use react-router-dom with material-ui:

import {Button} from "@material-ui/core"
// these are required components to work on
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

// importing pages
import Home from "./Home"
import Example from "./Example"

const browser = () =>{
return(
<div>
<BrowserRouter>
/* we can use this link in other pages also on any clickable 
   objects, but import it first. */
<Button component={Link} to={process.env.PUBLIC_URL + "/"}>Home</Button>
<Button component={Link} to={process.env.PUBLIC_URL + "/Example"}>Example</Button> 
<Switch>
/* you have to create the pages and import them if not it 
   shows error */
<Route exact path={process.env.PUBLIC_URL + "/"} component={Home} />
<Route exact path={process.env.PUBLIC_URL + "/Example"} component={Example}>
</Switch>
</BrowserRouter>
</div>
)
}
export default Browser;

live link in codesandbox:

https://codesandbox.io/s/responsivenavbarmaterial-ui-60czl

github :

https://github.com/ChittojiMuraliSreeKrishna/material-ui-testing

i tried my best to explain, Hope you guys like it. :)

help, i am stuck

Chittoji Murali Sree Krishna — Wed, 14 Apr 2021 03:08:21 +0000

when i use this in react its working only once in local server,
but when i deploy it on gh-pages, its not at all working
is there any other way of handling this in react?

const close = document.querySelectorAll('.close');
for(var i=0; i<close.length; i++){
close[i].addEventListener('click', function(){
this.parentElement.parentElement.style.display = 'none';
})
}

Dark mode Toggle vanilla js

Chittoji Murali Sree Krishna — Tue, 13 Apr 2021 06:10:42 +0000

onclick toggle class and also changing the content of h1 tag,
later chnaging the text if the class name is not assigned to dark.

Number Guessing Game {vanilla js}

Chittoji Murali Sree Krishna — Sat, 03 Apr 2021 06:59:56 +0000

just a basic number guessing game,
number is generated by random

Color-Flipper {HEX-CODES}

Chittoji Murali Sree Krishna — Wed, 24 Mar 2021 11:33:45 +0000

how to Change jquery to Vanilla javascript

Chittoji Murali Sree Krishna — Thu, 18 Mar 2021 10:11:33 +0000

$(this).parent().parent().find(".imgHide").toggleClass("imgShow");

to javaScript
for parent() we can use parentElement
for toggleClass() we can use .classList.toggle("class")
but for .find() i am not able to get any alternative in vanilla js.

How is my portfolio ?

Chittoji Murali Sree Krishna — Tue, 09 Mar 2021 01:57:15 +0000

Hey recently i have created my own portfolio, may I know how is it

link:

https://chittojimuralisreekrishna.github.io/Portfolio/

Vanilla Arch Linux Installation With ext4 filesystem

Chittoji Murali Sree Krishna — Tue, 02 Mar 2021 04:54:16 +0000

Installing Arch is Different from Other stuff

Have to download the iso which will be around 700mb from the preffered mirror

https://archlinux.org/download/

Load the iso into USB and shutdown and boot into the iso

.

After booting into the iso Click on Archlinux X86_64 installer, but this wont give any sort of gui boot but this is completly opposite, this welcomes you with a terminal

.

Now Lets Dive into Installation

Is FreeLancing is Necessary for Getting a JOB?

Chittoji Murali Sree Krishna — Tue, 02 Feb 2021 10:40:59 +0000

now a days everyone is like, if you wanna get a job you have to do some work as a freelancer. is it really that necessary to do freelancing?

How To Start with SpringBoot ?

Chittoji Murali Sree Krishna — Tue, 19 Jan 2021 08:22:25 +0000

hi i am Pursuing computer's graduate, started learning springBoot, but i dont know how to start with it.

Is PHP A Dead LANGUAGE?

Chittoji Murali Sree Krishna — Sat, 09 Jan 2021 11:46:36 +0000

Now a days few people telling me php is a dead language and they don't know the reason why it's called a dead language.