Closed frankcollins3 closed 11 months ago
the border toggles when hovered upon
in the old app when the border shows, both texts (between nav/main and main/footer disappear to let the border shine) [10:48pm]
being that this works: <Component mainBorderHover={mainBorderHover} setMainBorderHover={setMainBorderHover} {...pageProps} />
going to propDrill the username:
app.tsx -> index.tsx -> <main>
making string state to kick send from <main>
to app.tsx
[11:25pm]
got it. that works. I wonder what this set up solves that you can't set up redux in app.tsx
redux state in @redux/toolkit must be within the <Provider>
which means all the components excluding app.tsx
[11:46pm]
also bookmark: "username || LIfe is Water ---> "/" "Water is life" ---> "/dashboard"
could get text1 between header and main and text 2 between footer and main but have to finish this it's been too long [11:55am]
attempting to do: between
<navbar>
and<main>
"Water is Life" between<main>
and<footer>
"${CURRENT_USER.username is Water}" || {Life is Water}error: mobile responsive looks good it's the screen spanning > 1000px sizes that present this problem: in the footer: I made the progress update what hopes to look like a water bottle, opposite to the Left side {bottle.png}
Putting the {CURRENT_USER.username "is water"} string between bottle and the progress updater on the Right:
makes that droplet in the upside down bottle shaped container head downward and be off center.
To solve for this: Just decided to keep footer as is (which wasn't the way it was in react as detailed on github.com/frankcollins3 videos) "Water is Life" -------> "username is water" || "Life is Water" will toggle when the main container is hovered upon.
react-connect in react-express can allow for state to be in app.tsx whereas nextJS 13.0.3 and @redux/toolkit cannot. Made redux state for this but now attempting to prop drill from app.tsx but having trouble with {component = "pageprops"}
proposed approach: 0: prop drill