diff --git a/src/App.tsx b/src/App.tsx index a53698a..1c88b98 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,14 @@ import React from 'react'; import logo from './logo.svg'; import './App.css'; +import Layout from './Layout'; function App() { return (
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
+
- ); + ) } export default App; diff --git a/src/ContentLayout/index.tsx b/src/ContentLayout/index.tsx new file mode 100644 index 0000000..f74929a --- /dev/null +++ b/src/ContentLayout/index.tsx @@ -0,0 +1,19 @@ +import React, { FC } from 'react'; +import Filters from '../components/Filters'; +import Menu from '../components/Menu'; +import MoviesList from '../components/MovieList'; + + +const ContentLayout: FC = () => { + + return ( + <> +
+ + +
+ + ); +} + +export default ContentLayout; \ No newline at end of file diff --git a/src/Header/index.tsx b/src/Header/index.tsx new file mode 100644 index 0000000..aa16505 --- /dev/null +++ b/src/Header/index.tsx @@ -0,0 +1,8 @@ +import React, { FC } from 'react'; + +const Header: FC = () => { + + return (<>header); +} + +export default Header; \ No newline at end of file diff --git a/src/Layout/index.tsx b/src/Layout/index.tsx new file mode 100644 index 0000000..4d2e223 --- /dev/null +++ b/src/Layout/index.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react'; +import ContentLayout from '../ContentLayout'; +import Header from '../Header'; + + + +const Layout: FC = () => { + + //const movies = + + return ( + <> + layout + {/*
+ */} + + ); +} + +export default Layout; \ No newline at end of file diff --git a/src/MovieCard/index.tsx b/src/MovieCard/index.tsx new file mode 100644 index 0000000..62e0731 --- /dev/null +++ b/src/MovieCard/index.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react'; + +const MovieCard: FC = ({ title, description }) => { + + return ( +
+

{title}

+

{description}

+
+ ); +} + +interface MovieCardInterface { + title: string, + description: string, + coverUrl: string, +} + + +export default MovieCard; + diff --git a/src/components/Filters/index.tsx b/src/components/Filters/index.tsx new file mode 100644 index 0000000..325d53f --- /dev/null +++ b/src/components/Filters/index.tsx @@ -0,0 +1,15 @@ +import React, { FC } from 'react'; + + +import './App.css'; + +const Filters: FC = () => { + + return ( + <> + + + ); +} + +export default Filters; \ No newline at end of file diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx new file mode 100644 index 0000000..efe3614 --- /dev/null +++ b/src/components/Menu/index.tsx @@ -0,0 +1,18 @@ +import React, { FC } from 'react'; + + +import './App.css'; + + + + +const Menu: FC = () => { + + return ( + <> + + + ); +} + +export default Menu; \ No newline at end of file diff --git a/src/components/MovieList/index.tsx b/src/components/MovieList/index.tsx new file mode 100644 index 0000000..eba66e5 --- /dev/null +++ b/src/components/MovieList/index.tsx @@ -0,0 +1,13 @@ +import React, { FC } from 'react'; + + +const MoviesList: FC = () => { + + return ( + <> + + + ); +} + +export default MoviesList; \ No newline at end of file diff --git a/src/mock-data.json b/src/mock-data.json new file mode 100644 index 0000000..f74e4ee --- /dev/null +++ b/src/mock-data.json @@ -0,0 +1,96 @@ +[ + { + "id": "1", + "title": "Game Night", + "year": "2018", + "genres": ["Action", "Comedy", "Crime"], + "contentRating": "11", + "duration": "PT100M", + "releaseDate": "2018-02-28", + "averageRating": 0, + "originalTitle": "", + "storyline": "A group of friends who meet regularly for game nights find themselves trying to solve a murder mystery.", + "actors": ["Rachel McAdams", "Jesse Plemons", "Jason Bateman"], + "imdbRating": "", + "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjQxMDE5NDg0NV5BMl5BanBnXkFtZTgwNTA5MDE2NDM@._V1_SY500_CR0,0,337,500_AL_.jpg" + }, + { + "id": "2", + "title": "Area X: Annihilation", + "year": "2018", + "genres": ["Adventure", "Drama", "Fantasy"], + "contentRating": "R", + "duration": "", + "releaseDate": "2018-02-23", + "averageRating": 0, + "originalTitle": "Annihilation", + "storyline": "A biologist's husband disappears. She puts her name forward for an expedition into an environmental disaster zone, but does not find what she's expecting. The expedition team is made up of the biologist, an anthropologist, a psychologist, a surveyor, and a linguist.", + "actors": ["Tessa Thompson", "Jennifer Jason Leigh", "Natalie Portman"], + "imdbRating": "", + "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTk2Mjc2NzYxNl5BMl5BanBnXkFtZTgwMTA2OTA1NDM@._V1_SY500_CR0,0,320,500_AL_.jpg" + }, + { + "id": "3", + "title": "Hannah", + "year": "2017", + "genres": ["Drama"], + "contentRating": "", + "duration": "PT95M", + "releaseDate": "2018-01-24", + "averageRating": 0, + "originalTitle": "", + "storyline": "Intimate portrait of a woman drifting between reality and denial when she is left alone to grapple with the consequences of her husband's imprisonment.", + "actors": [ + "Charlotte Rampling", + "Andr\u00e9 Wilms", + "St\u00e9phanie Van Vyve" + ], + "imdbRating": 6.5, + "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BNWJmMWIxMjQtZTk0Mi00YTE0LTkyNzAtYzQxYjcwYjE4ZDk2XkEyXkFqcGdeQXVyMTc4MzI2NQ@@._V1_SY500_SX350_AL_.jpg" + }, + { + "id": "4", + "title": "The Lodgers", + "year": "2017", + "genres": ["Drama", "Horror", "Romance"], + "contentRating": "R", + "duration": "PT92M", + "releaseDate": "2018-03-09", + "averageRating": 0, + "originalTitle": "", + "storyline": "1920, rural Ireland. Anglo Irish twins Rachel and Edward share a strange existence in their crumbling family estate. Each night, the property becomes the domain of a sinister presence (The Lodgers) which enforces three rules upon the twins: they must be in bed by midnight; they may not permit an outsider past the threshold; if one attempts to escape, the life of the other is placed in jeopardy. When troubled war veteran Sean returns to the nearby village, he is immediately drawn to the mysterious Rachel, who in turn begins to break the rules set out by The Lodgers. The consequences pull Rachel into a deadly confrontation with her brother - and with the curse that haunts them.", + "actors": ["Charlotte Vega", "David Bradley", "Moe Dunford"], + "imdbRating": 5.8, + "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BM2FhM2E1MTktMDYwZi00ODA1LWI0YTYtN2NjZjM3ODFjYmU5XkEyXkFqcGdeQXVyMjY1ODQ3NTA@._V1_SY500_CR0,0,337,500_AL_.jpg" + }, + { + "id": "5", + "title": "Beast of Burden", + "year": "2018", + "genres": ["Action", "Crime", "Drama"], + "contentRating": "R", + "duration": "", + "releaseDate": "2018-02", + "averageRating": 0, + "originalTitle": "", + "storyline": "Sean Haggerty only has an hour to deliver his illegal cargo. An hour to reassure a drug cartel, a hitman, and the DEA that nothing is wrong. An hour to make sure his wife survives. And he must do it all from the cockpit of his Cessna.", + "actors": ["Daniel Radcliffe", "Grace Gummer", "Pablo Schreiber"], + "imdbRating": "", + "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BMjEyNTM3MDQ2NV5BMl5BanBnXkFtZTgwMDI5Nzk1NDM@._V1_SY500_CR0,0,336,500_AL_.jpg" + }, + { + "id": "6", + "title": "The Chamber", + "year": "2016", + "genres": ["Horror", "Thriller"], + "contentRating": "", + "duration": "PT88M", + "releaseDate": "2017-03-10", + "averageRating": 0, + "originalTitle": "", + "storyline": "A claustrophobic survival thriller set beneath the Yellow Sea off the coast of North Korea where the pilot of a small submersible craft and a three man Special Ops team on a secret recovery mission become trapped underwater in a fight for survival.", + "actors": ["Johannes Kuhnke", "Charlotte Salt", "James McArdle"], + "imdbRating": 4.4, + "posterurl": "https://images-na.ssl-images-amazon.com/images/M/MV5BNTVlODgwMjgtZGUzMy00ZTY1LWIyMDEtYTI2Y2JlYzVjZTNkXkEyXkFqcGdeQXVyNTg0MDM1MzY@._V1_SY500_CR0,0,337,500_AL_.jpg" + } +]