Mutuajoseph/landing page

src/App.tsx

@@ -4,7 +4,6 @@ import "./App.css";
 import Home from "./views/Home";
 import Register from "./views/Register";
 import Login from "./views/Login";
-import FilmDetail from "./views/FilmDetail";
 import Planets from "./views/Planets";
 import {Starships} from "./views/Starships";
 import PlanetDetails from "./components/planets/PlanetDetails";
@@ -13,6 +12,7 @@ import Footer from "./components/Footer";
 import Character from "./views/Character";
 import CharacterDetails from "./components/characters/CharacterDetails";
 import {StarshipDetails} from "./components/starships/StarshipDetails";
+import FilmDetail from "./components/Films/FilmDetail";
 
 function App() {
   const { pathname } = useLocation();
@@ -27,7 +27,7 @@ function App() {
           <Route path="/" element={<Home />} />
           <Route path="/register" element={<Register />} />
           <Route path="/login" element={<Login />} />
-          <Route path="/filmdetail" element={<FilmDetail />} />
+          <Route path="/film/:id" element={<FilmDetail />} />
           <Route path="/planets" element={<Planets />} />
           <Route path="/planet/:id" element={<PlanetDetails />} />
           <Route path="/character" element={<Character />} />

src/components/Films/FilmDetail.tsx

@@ -1,33 +1,118 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import { useData } from "../../hooks/data/useData";
+import { gql } from "@apollo/client";
+import { AppLoader } from "../AppLoader";
+import { AppError } from "../AppError";
+import { starShipInfo } from "../../utils/starwarimages";
 
-const FilmDetail = ({ film }: any) => {
+const FilmDetail = () => {
 
-  const navigate = useNavigate()
+  const { id } = useParams();
+  const { loading, error, data } = useData(
+    gql`
+      query GetFilmDetail($nodeId: ID!) {
+        node(id: $nodeId) {
+          ... on Film {
+            created
+            director
+            edited
+            episodeID
+            id
+            openingCrawl
+            releaseDate
+            title
+          }
+        }
+      }
+    `,
+    {
+      variables: { nodeId: id },
+    }
+  );
+
+  let node = {};
 
-  const handleSubmit = (item: any) => {
-    navigate(`/character/${item.id}`)
+  if (data) {
+    node = data.node;
   }
 
+  const filmData = starShipInfo()
+
   return (
-    <div className="w-[300px]">
-      <div>
-        <img
-          src="https://images.unsplash.com/photo-1579935110464-fcd041be62d0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fHN0YXIlMjB3YXJzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60"
-          alt="single film"
-        />
-      </div>
-
-      <div className="my-2 space-y-4">
-        <h3 className="font-semibold text-xl">{film.title}</h3>
-        <p className="font-extralight">{film.description}</p>
-        <button onClick={() => handleSubmit(film)} className="relative text-white w-[60%] inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-red-900 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200">
-          <span className="relative text-white w-[100%] px-5 py-4 transition-all ease-in duration-75 bg-black rounded-md group-hover:bg-opacity-0">
-            Watch Preview
-          </span>
-        </button>
-      </div>
-    </div>
+    <div className="bg-black w-full min-h-screen mb-0">
+
+             <div className='container mx-auto mt-10 text-white flex  flex-col'>
+
+                 { loading ? <AppLoader/> : <></> }
+
+                 { error ? <AppError message={error.message}/> : <></> }
+
+                 { data ? <>
+                     <div className="md:flex items-start justify-center py-12 2xl:px-20 md:px-6 px-4">
+
+                         <div className="xl:w-2/5 lg:w-2/5 md:w1/2 w-80 md:block h-fit">
+                             <img src={filmData.shipLogo} alt='banner'
+                                  className="w-full object-cover h-96 hover:object-scale-down"/>
+                         </div>
+
+                         <div className="xl:w-3/5 md:w-1/2 lg:w-3/5 lg:ml-8 md:ml-6 md:mt-0 mt-6">
+
+                             <div className="border-b border-gray-200 pb-6">
+                                 <h1 className="lg:text-4xl text-xl font-semibold lg:leading-6 leading-7 text-white dark:text-white mt-2">
+                                     {node["title"]}
+                                 </h1>
+                             </div>
+
+                             <div className={'mt-5'}>
+                                 <div className={'flex flex-row'}>
+                                     <p className={'text-2xl font-bold text-[#E02312] uppercase'}>Director:</p>
+                                     <p className={'text-white text-xl justify-center ml-4'}>{node["director"]}</p>
+                                 </div>
+
+                                 <div className={'flex flex-row mt-2'}>
+                                     <p className={'text-2xl font-bold text-[#E02312] uppercase'}>Release Date :</p>
+                                     <p className={'text-white text-xl justify-center ml-4'}>{node["releaseDate"][0]}</p>
+                                 </div>
+
+                                 <p className="xl:pr-48 text-xl lg:leading-tight leading-normal text-gray-600 dark:text-gray-300 mt-7">
+                                     {node["openingCrawl"]}
+                                 </p>
+
+                             </div>
+                         </div>
+                     </div>
+                     <div className={'flex justify-between mt-[5%]'}>
+
+                         <h2 className={'text-sky-400 text-2xl mx-5 mt-[5%] border-4 border-sky-400 p-5 rounded-full hover:bg-sky-400 hover:text-white'}>
+                             Yoda
+                         </h2>
+
+                         <h2 className={'text-yellow-200 text-2xl mx-5 mt-[5%] border-4 border-yellow-200 p-5 rounded-full hover:bg-yellow-200 hover:text-black'}>
+                             Empire strikes back
+                         </h2>
+
+                         <h2 className={'text-teal-500 text-2xl mx-5 mt-[5%] border-4 border-teal-500 p-5 rounded-full hover:bg-teal-500 hover:text-white'}>
+                             Crosshair
+                         </h2>
+
+                         <h2 className={'text-rose-500 text-2xl mx-5 mt-[5%] border-4 border-rose-500 p-5 rounded-full hover:bg-rose-500 hover:text-white'}>
+                             Mandalorian
+                         </h2>
+
+                         <h2 className={'text-orange-500 text-2xl mx-5 mt-[5%] border-4 border-orange-500 p-5 rounded-full hover:bg-orange-500 hover:text-white'}>
+                             Ryloth
+                         </h2>
+
+                         <h2 className={'text-teal-500 text-2xl mx-5 mt-[5%] border-4 border-teal-500 p-5 rounded-full hover:bg-teal-500 hover:text-white'}>
+                             Luke Skywalker
+                         </h2>
+
+                     </div>
+                 </> : <></> }
+
+            </div>
+        </div>
   );
 };
 

src/components/Films/FilmItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const FilmItem = ({id, logo, title, description}) => {
+  return (
+    <div className={'flex flex-col min-h-[100px]'}>
+            <img className={'object-cover h-96 rounded-t-lg'} src={logo} alt={''}/>
+            <div className={'flex flex-col h-64 items-start justify-between'}>
+                <h1 className={'text-2xl mt-3 px-1 text-white font-semibold'}>
+                    {title}
+                </h1>
+                <p className={'px-1 mt-2 text-white font-extralight text-lg'}>
+                    {description}
+                </p>
+                <Link
+                    to={`/film/${id}`}
+                    className={'border border-2 rounded-md mt-4 border-[#E02312] text-white p-2 hover:bg-[#E02312] w-max'}>
+                    FILM DETAILS
+                </Link>
+            </div>
+        </div>
+  )
+}
+
+export default FilmItem

src/components/Films/FilmsList.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 import FilmDetail from "./FilmDetail";
 
-const FilmsList = ({films}: any) => {
+const FilmsList = () => {
+
+  let films = []
   return (
     <div className="flex justify-start gap-8 flex-wrap">
       {films ? (
-        films.map((film: any, index: number) => <FilmDetail key={index} film={film} />)
+        films.map((film: any, index: number) => <FilmDetail key={index} />)
       ) : (
         <>No films to load</>
       )}