From 74953e11c5be0d87bf65a8a7f7d4e401759c7f26 Mon Sep 17 00:00:00 2001 From: mutuajoseph Date: Thu, 2 Mar 2023 12:57:21 +0300 Subject: [PATCH 1/2] Feat: Added the landing page. --- src/components/Films/FilmDetail.tsx | 26 ++++++ src/components/Films/FilmsList.tsx | 16 ++++ src/components/Footer.tsx | 108 +++++++++++++++++++++++ src/components/Navbar.tsx | 26 ++++++ src/views/Home.tsx | 131 +++++++++++++++++++++++++--- 5 files changed, 295 insertions(+), 12 deletions(-) create mode 100644 src/components/Films/FilmDetail.tsx create mode 100644 src/components/Films/FilmsList.tsx create mode 100644 src/components/Footer.tsx create mode 100644 src/components/Navbar.tsx diff --git a/src/components/Films/FilmDetail.tsx b/src/components/Films/FilmDetail.tsx new file mode 100644 index 0000000..5e5d5ee --- /dev/null +++ b/src/components/Films/FilmDetail.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +const FilmDetail = ({ film }: any) => { + return ( +
+
+ single film +
+ +
+

{film.title}

+

{film.description}

+ +
+
+ ); +}; + +export default FilmDetail; diff --git a/src/components/Films/FilmsList.tsx b/src/components/Films/FilmsList.tsx new file mode 100644 index 0000000..37fa537 --- /dev/null +++ b/src/components/Films/FilmsList.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import FilmDetail from "./FilmDetail"; + +const FilmsList = ({films}: any) => { + return ( +
+ {films ? ( + films.map((film: any, index: number) => ) + ) : ( + <>No films to load + )} +
+ ); +}; + +export default FilmsList; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..b66a925 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,108 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..d646914 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { FaUserCircle } from "react-icons/fa"; +import Logo from "../images/starwarslogo.png"; + +const Navbar = () => { + return ( +
+
+
+ Starwars Logo +
+
+
Home
+
People
+
Vehicles
+
Planets
+
+
+ +
+
+
+ ); +}; + +export default Navbar; diff --git a/src/views/Home.tsx b/src/views/Home.tsx index ba0ed0c..9e98b1c 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,23 +1,130 @@ import React from "react"; import useHeader from "../hooks/useHeader"; -import {getUser} from "../utils/authData"; -import {useNavigate} from "react-router-dom"; +import { getUser } from "../utils/authData"; +import { useNavigate } from "react-router-dom"; +import Navbar from "../components/Navbar"; +import Footer from "../components/Footer"; +import FilmsList from "../components/Films/FilmsList"; + +const films = [ + { + id: 1, + title: "Starwars welcome to galaxy", + description: + "'Star Wars' is a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics,", + }, + { + id: 2, + title: "Starwars welcome to galaxy", + description: + "'Star Wars' is a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics,", + }, + { + id: 3, + title: "Starwars welcome to galaxy", + description: + "'Star Wars' is a space opera fran chise created by George Lucas that revolves around a group of rebels fighting against an evil empire. The franchise includes multiple films, books, comics,", + }, +]; function Home() { + const navigate = useNavigate(); + if (!getUser()) navigate("/login"); + + return ( +
+ +
+
+
+
+
+

Story By

+

John Doe

+

John Doe

+

John Doe

+
+
+

Directed By

+

John Doe

+

John Doe

+
+
+

Music

+

John Doe

+
+
+
+

+ May the force be with you +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet, + non? +

+
+ - const navigate = useNavigate() - if (!getUser()) navigate('/login') + +
+
+
+
+ starwars +
+
- // extract the header from the hook - // Header extracted will be used to determine the current page +
+
+ +
+
+

Star Wars

- // extract the header from the hook - // Header extracted will be used to determine the current page - const { header } = useHeader("Home"); +
+

+ "Star Wars" is a space opera franchise created by George Lucas + that revolves around a group of rebels fighting against an evil + empire. The franchise includes multiple films, books, comics, and + other media. The original "Star Wars" trilogy, released in the + late 1970s and early 1980s, tells the story of Luke Skywalker and + his journey to become a Jedi and defeat the Empire. +

+

+ In the prequel trilogy, the backstory of Darth Vader is explored. + The prequels follow Jedi Knight Qui-Gon Jinn and his apprentice + Obi-Wan Kenobi as they encounter a young Anakin Skywalker, who + eventually becomes Darth Vader. The prequels show the Republic's + downfall and the rise of the Empire. +

+
+
+
- return ( -
- This the {header} Page +
+

All Films

+

Latest Seasons

+ +
+
+
); } From 1b811e04691b1235274b81271bb03984fd335807 Mon Sep 17 00:00:00 2001 From: mutuajoseph Date: Thu, 2 Mar 2023 13:02:58 +0300 Subject: [PATCH 2/2] Feat: Remove the useHeader Import --- src/views/Home.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/Home.tsx b/src/views/Home.tsx index 9e98b1c..f683dda 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,5 +1,4 @@ import React from "react"; -import useHeader from "../hooks/useHeader"; import { getUser } from "../utils/authData"; import { useNavigate } from "react-router-dom"; import Navbar from "../components/Navbar";