Wen's movie site #51
Wen's movie site #51
Conversation
…active class based on the page param
| @@ -2,9 +2,9 @@ | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="UTF-8" /> | |||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |||
| <link rel="icon" type="image/svg+xml" href="/src/assets/cinema.png" /> | |||
| <BrowserRouter> | ||
| <Routes> | ||
| <Route path="/" element={<Home />}> | ||
| <Route index element={<Navigate replace to="browser" />} /> |
There was a problem hiding this comment.
Cool that you use navigate here. We didn't do that. Great inspiration!
// Martin, Linda
| import styles from "../styling/Category.module.css"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const ListTypes = [ |
There was a problem hiding this comment.
Nice to use an array for the different endpoints.
// Martin, Linda
There was a problem hiding this comment.
But why PascalCase and not camelCase? 👀
There was a problem hiding this comment.
It's becuz the the variable is const and never gonna change. But maybe my impression was wrong, should we still use camelCase in this case @HIPPIEKICK ?
| import { useEffect, useRef } from "react"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const LoadImage = ({ src, alt, className }) => { |
There was a problem hiding this comment.
Can we get a tutorial pls 😄 because we don't know how it works exactly.
// Martin, Linda
| .finally(() => setIsLoading(false)); | ||
| }, [searchParams]); | ||
|
|
||
| const changePage = e => { |
There was a problem hiding this comment.
We would have liked to implement it too if we had time. Nice solution! 💯
//Martin, Linda
| font-weight: 500; | ||
| } | ||
|
|
||
| .back:hover { |
There was a problem hiding this comment.
Elegant solution to use the gap property to animate the hover effect.
// Martin, Linda
| import styles from "../styling/Category.module.css"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const ListTypes = [ |
| import styles from "../styling/Category.module.css"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const ListTypes = [ |
There was a problem hiding this comment.
But why PascalCase and not camelCase? 👀
| className={({ isActive }) => | ||
| isActive && category === listType.endpoint | ||
| ? `${styles.categoryLink} ${styles.active}` |
| <Lottie | ||
| className={styles.animation} | ||
| animationData={color === "pink" ? errorPink : errorBlack} | ||
| loop={false} | ||
| /> |
There was a problem hiding this comment.
Very nice Lottie animations you've found!
| import { useEffect, useRef } from "react"; | ||
| import PropTypes from "prop-types"; | ||
|
|
||
| const LoadImage = ({ src, alt, className }) => { |
src/components/LoadImage.jsx
Outdated
| <> | ||
| <img | ||
| ref={imgRef} | ||
| src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjYGBg+A8AAQQBAHAgZQsAAAAASUVORK5CYII=" | ||
| data-src={src} | ||
| alt={alt} | ||
| loading="lazy" | ||
| className={className} | ||
| /> | ||
| </> |
There was a problem hiding this comment.
Very nice with lazy loading and that you found use for the useRef hook 🔥 Do you need the extra fragment though? 👀
There was a problem hiding this comment.
You're right I remove the extra fragment
src/components/Pagination.jsx
Outdated
There was a problem hiding this comment.
Very nice extra feature! ⭐
src/pages/PageNotFound.jsx
Outdated
There was a problem hiding this comment.
Another cool addition to your project, but make sure to fix the mobile view so that it's responsive too 😊
Remove loading="lazy" attribute to make it fully listen to the observer and remove the extra fragment.
Netlify link
https://popcorn-movie-hub.netlify.app/
Collaborators
[wwenzz]