From 2f20c5734daf627f4daa931176e548e9dd95a48b Mon Sep 17 00:00:00 2001 From: renatoveludo Date: Fri, 10 Jan 2025 18:29:38 -0300 Subject: [PATCH] add task solution --- README.md | 2 +- src/App.jsx | 91 +------------------------ src/App.scss | 10 --- src/components/MovieCard/MovieCard.jsx | 34 ++++++++- src/components/MovieCard/MovieCard.scss | 3 + src/components/MovieList/MovieList.jsx | 9 ++- src/components/MovieList/MovieList.scss | 5 ++ 7 files changed, 53 insertions(+), 101 deletions(-) diff --git a/README.md b/README.md index 27504b37..58a1aa74 100644 --- a/README.md +++ b/README.md @@ -16,4 +16,4 @@ You are given movies loaded from the API and initial markup. Your task is to: - Install Prettier Extention and use this [VSCode settings](https://mate-academy.github.io/fe-program/tools/vscode/settings.json) to enable format on save. - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline). - Open one more terminal and run tests with `npm test` to ensure your solution is correct. -- Replace `` with your Github username in the [DEMO LINK](https://.github.io/react_movies-list-js/) and add it to the PR description. +- Replace `` with your Github username in the [DEMO LINK](https://renatoveludo.github.io/react_movies-list-js/) and add it to the PR description. diff --git a/src/App.jsx b/src/App.jsx index f36c45ef..f974ef72 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,98 +1,13 @@ /* eslint-disable max-len */ import './App.scss'; -// import moviesFromServer from './api/movies.json'; +import { MovieList } from './components/MovieList/MovieList'; +import moviesFromServer from './api/movies.json'; export const App = () => (
-
-
-
-
- Film logo -
-
- -
-
-
-
- imdb -
-
- -
-

- Inception -

-
-
- -
-

- Follows the lives of eight very different couples in dealing - with their love lives in various loosely interrelated tales all - set during a frantic month before Christmas in London, England. -

- - - IMDB - -
-
-
- -
-
-
- Film logo -
-
- -
-
-
-
- imdb -
-
- -
-

- Love Actually -

-
-
- -
-

- A thief who steals corporate secrets through the use of - dream-sharing technology is given the inverse task of planting - an idea into the mind of a C.E.O. -

- - - IMDB - -
-
-
-
+
diff --git a/src/App.scss b/src/App.scss index 59cee43b..2a087543 100644 --- a/src/App.scss +++ b/src/App.scss @@ -17,13 +17,3 @@ iframe { padding: 20px; border-left: 1px solid lightgray; } - -.movies { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 20px; -} - -.card-image img { - object-fit: contain; -} diff --git a/src/components/MovieCard/MovieCard.jsx b/src/components/MovieCard/MovieCard.jsx index a1f454f7..d4e6a620 100644 --- a/src/components/MovieCard/MovieCard.jsx +++ b/src/components/MovieCard/MovieCard.jsx @@ -1,3 +1,35 @@ import './MovieCard.scss'; -export const MovieCard = () => <>Put the card here; +export const MovieCard = ({ movie }) => ( +
+
+
+ Film logo +
+
+ +
+
+
+
+ imdb +
+
+ +
+

+ {movie.title} +

+
+
+ +
+

{movie.description}

+ + + IMDB + +
+
+
+); diff --git a/src/components/MovieCard/MovieCard.scss b/src/components/MovieCard/MovieCard.scss index f1b40ee0..42a3ad55 100644 --- a/src/components/MovieCard/MovieCard.scss +++ b/src/components/MovieCard/MovieCard.scss @@ -1 +1,4 @@ // add styles here +.card-image img { + object-fit: contain; +} diff --git a/src/components/MovieList/MovieList.jsx b/src/components/MovieList/MovieList.jsx index b2820479..097f33c6 100644 --- a/src/components/MovieList/MovieList.jsx +++ b/src/components/MovieList/MovieList.jsx @@ -1,3 +1,10 @@ +import { MovieCard } from '../MovieCard/MovieCard'; import './MovieList.scss'; -export const MovieList = () => <>Put the list here; +export const MovieList = ({ movies }) => ( +
+ {movies.map(movie => ( + + ))} +
+); diff --git a/src/components/MovieList/MovieList.scss b/src/components/MovieList/MovieList.scss index f1b40ee0..aa2bccbc 100644 --- a/src/components/MovieList/MovieList.scss +++ b/src/components/MovieList/MovieList.scss @@ -1 +1,6 @@ // add styles here +.movies { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; +}