sinatra-pod · otsembo · Mar 2, 2023 · Mar 2, 2023 · Mar 2, 2023 · Mar 2, 2023
diff --git a/dist/test. b/dist/test.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,9 @@
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "alpinejs": "^3.11.1",
     "dotenv": "^16.0.3",
+    "esbuild": "^0.17.10",
     "firebase": "^9.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,21 +1,44 @@
 import React from "react";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useLocation } from "react-router-dom";
 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 PlanetDetails from "./components/planets/PlanetDetails";
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
+import Character from "./views/Character";
+import CharacterDetails from "./components/characters/CharacterDetails";
+
 function App() {
+  const { pathname } = useLocation();
+
   return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/register" element={<Register />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/filmdetail" element={<FilmDetail />} />
-      <Route path="/planets" element={<Planets />} />
-    </Routes>
+    <>
+      <header className="container__header">
+        {pathname !== "/login" && <Navbar /> && pathname !== "/register" && <Navbar />}
+      </header>
+      <div>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/filmdetail" element={<FilmDetail />} />
+          <Route path="/planets" element={<Planets />} />
+          <Route path="/planet/:id" element={<PlanetDetails />} />
+          <Route path="/character" element={<Character />} />
+          <Route path="/character/:id" element={<CharacterDetails />} />
+
+        </Routes>
+        <div>
+          {pathname !== "/login" && <Footer /> && pathname !== "/register" && <Footer />}
+        </div>
+      </div>
+    </>
+
   );
 }
 

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -7,8 +7,8 @@ const Footer = () => {
       <div className="sm:flex sm:items-center sm:justify-between container mx-auto">
         <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
           © 2023{" "}
-          <Link to="https://flowbite.com/" className="hover:underline">
-            Flowbite™
+          <Link to="#" className="hover:underline">
+            StarShip Clone™
           </Link>
           . All Rights Reserved.
         </span>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import logo from '../images/starwarslogo.png';
+import { Link } from 'react-router-dom';
+
+import { FaUser, FaSearch } from 'react-icons/fa';
+
+
+function Header() {
+  return (
+    <>
+      <nav className="grid justify-center p-6">
+        <div className='flex-row flex items-stretch'>
+          <span className=''>
+            <form className="flex justify-end p-6 mt-8 rounded-full bg-black">
+              <button type="submit" className="btn-search ml-0 py-2 text-white rounded-full">
+                <FaSearch />
+              </button>
+              <input type="text" name='search'
+                className="bg-black text-white outline-none focus:shadow-outline px-4 py-2 w-full"
+                placeholder="Search..." />
+            </form>
+          </span>
+          <div className=''>
+            <img src={logo} alt="Logo" className='' />
+          </div>
+          <div className='flex space-x-2 mt-10 lg:ml-auto sm:ml-96 text-white '>
+            <div><FaUser /></div>
+            <div><Link to="/login"> Sign In</Link></div>
+
+          </div>
+        </div>
+        <div className="w-full block lg:flex lg:w-auto">
+          <div className="lg:space-x-52 text-sm font-medium leading-8 tracking-0 text-white hover:text-teal-200 ">
+            <a href="/planets" className="block mt-4 lg:inline-block lg:mt-0 ">
+              FILMS
+            </a>
+            <a href="/databanks" className="block mt-4 lg:inline-block lg:mt-0">
+              CHARACTERS
+            </a>
+            <a href="/planets" className="block mt-4 lg:inline-block lg:mt-0">
+              Planets
+            </a>
+            <a href="/databanks" className="block mt-4 lg:inline-block lg:mt-0">
+              Starship
+            </a>
+          </div>
+
+        </div>
+
+      </nav></>
+  )
+}
+
+export default Header
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FaUserCircle } from "react-icons/fa";
 import Logo from "../images/starwarslogo.png";
+import { Link } from 'react-router-dom';
 
 const Navbar = () => {
   return (
@@ -10,10 +11,10 @@ const Navbar = () => {
           <img src={Logo} alt="Starwars Logo" />
         </div>
         <div className="flex gap-12 font-extralight text-lg">
-          <div>Home</div>
-          <div>People</div>
-          <div>Vehicles</div>
-          <div>Planets</div>
+          <div><Link to="/">Films</Link></div>
+          <div><Link to="/character">Characters</Link></div>
+          <div><Link to="/planets">Planets</Link></div>
+          <div><Link to="/starships">Starships</Link></div>
         </div>
         <div className="">
           <FaUserCircle className="text-4xl" />

diff --git a/src/components/characters/CharacterDetails.tsx b/src/components/characters/CharacterDetails.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+function CharacterDetails() {
+  return (
+    <div className="bg-black w-full min-h-screen mb-0">
+      <div className='border-b-2  border-white  m-auto w-11/12 mt-4' />
+      <div className='bg-gray-900 w-4/5 h-20 m-auto mt-10' />
+      <div className='container mx-auto md:container md:mx-auto mt-10 text-white flex  '>
+
+        <div className="md:flex items-start justify-center py-12 2xl:px-20 md:px-6 px-4">
+          <div className="xl:w-2/6 lg:w-2/5 w-80 md:block hidden">
+            <img src="https://i.postimg.cc/0ybdytWT/download.jpg" alt='banner' className="w-full" />
+          </div>
+          <div className="xl:w-3/5 md:w-1/2 lg:ml-8 md:ml-6 md:mt-0 mt-6">
+            <div className="border-b border-gray-200 pb-6">
+              <h1 className="lg:text-2xl text-xl font-semibold lg:leading-6 leading-7 text-white dark:text-white mt-2">Star Wars: A New Hope (Episode IV)
+              </h1>
+            </div>
+            <div>
+              <p className="text-base leading-4 mt-7 text-gray-600 dark:text-gray-300">Ratings: PG</p>
+              <p className="text-base leading-4 mt-4 text-gray-600 dark:text-gray-300">Release Date: 23th May 2020</p>
+              <p className="text-base leading-4 mt-4 text-gray-600 dark:text-gray-300">Genre: Adventure, Fantasy, Science Fiction</p>
+
+              <p className="xl:pr-48 text-base lg:leading-tight leading-normal text-gray-600 dark:text-gray-300 mt-7">Luke Skywalker begins a journey that will change the galaxy in Star Wars: Episode IV - A New Hope. Nineteen years after the formation of the Empire, Luke is thrust into the struggle of the Rebel Alliance when he meets Obi-Wan Kenobi, who has lived for years in seclusion on the desert planet of Tatooine. Obi-Wan begins Luke’s Jedi training as Luke joins him on a daring mission to rescue the beautiful Rebel leader Princess Leia from the clutches of Darth Vader and the evil Empire.</p>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+export default CharacterDetails
diff --git a/src/components/form/SearchForm.tsx b/src/components/form/SearchForm.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+function SearchForm() {
+  return (
+    <form className='bg-zinc-700 rounded-md'>
+      <label className="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label>
+      <div className="relative bg-zinc-700 rounded-md">
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+          <svg aria-hidden="true" className="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+        </div>
+        <input type="search" className="bg-zinc-700	block w-full p-4 pl-10 text-sm text-gray-900 rounded-lg bg-gray-50" placeholder="Search ..." />
+      </div>
+    </form>
+  )
+}
+
+export default SearchForm
diff --git a/src/components/planets/Planet.tsx b/src/components/planets/Planet.tsx
@@ -0,0 +1,139 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import 'alpinejs'
+
+
+function Planet() {
+  const [openTab, setOpenTab] = React.useState(1);
+  const planets = [
+    { id: 1, title: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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: 4, title: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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: 5, title: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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: 6, title: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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: 7, title: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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: 8, title: "The Phantom Menace", image: "https://i.postimg.cc/0ybdytWT/download.jpg", description: "Star Warsis 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" }
+  ]
+  return (
+    <>
+      <div className="flex flex-wrap min-h-full min-w-full bg-black	">
+        <div className="w-full flex bg-black">
+          <div className='flex text-white flex-row text-center min-h-full w-1/5'>
+            <ul
+              className="mb-0 list-none p pt-3 pb-4 block"
+              role="tablist"
+            >
+              <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
+                <a
+                  className={
+                    "text-xs font-bold uppercase px-5 py-3 block leading-normal "
+
+                  }
+                  onClick={e => {
+                    e.preventDefault();
+                    setOpenTab(1);
+                  }}
+                  data-toggle="tab"
+                  href="#link1"
+                  role="tablist"
+                >
+                  <i className="fas fa-space-shuttle text-base mr-1"></i> All Films
+                </a>
+              </li>
+              <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
+                <a
+                  className={
+                    "text-xs font-bold uppercase px-5 py-3  block leading-normal "
+                  }
+                  onClick={e => {
+                    e.preventDefault();
+                    setOpenTab(2);
+                  }}
+                  data-toggle="tab"
+                  href="#link2"
+                  role="tablist"
+                >
+                  <i className="fas fa-cog text-base mr-1"></i>  Realease By Year
+                </a>
+              </li>
+              <li className="-mb-px mr-2 last:mr-0 flex-auto text-center">
+                <a
+                  className={
+                    "text-xs font-bold uppercase px-5 py-3  block leading-normal "
+                  }
+                  onClick={e => {
+                    e.preventDefault();
+                    setOpenTab(3);
+                  }}
+                  data-toggle="tab"
+                  href="#link3"
+                  role="tablist"
+                >
+                  <i className="fas fa-briefcase text-base mr-1"></i>  Genre
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div className="relative flex flex-col min-w-0 break-words  w-full mb-6 shadow-lg rounded min-h-full w-4/5">
+            <div className="px-4 py-5 flex-auto">
+              <div className="tab-content tab-space">
+                <div className={openTab === 1 ? "block" : "hidden"} id="link1">
+                  <div className="w-full gap-4 flex-wrap flex justify-center items-center">
+                    {planets.map((planet) => (
+                      <div className={'flex flex-col'}>
+                        <img className={'object-cover h-96 rounded-t-lg'} src={planet.image} alt={''} />
+                        <h1 className={'text-2xl px-1 text-white'}>
+                          {planet.title}
+                        </h1>
+                        <Link to={`/planet/${planet.id}`} className={'border border-2 rounded-md mt-4 border-[#E02312] text-white p-2 hover:bg-[#E02312] w-max'}>
+                          WATCH PREVIEW
+                        </Link>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+              </div>
+              <div className={openTab === 2 ? "block" : "hidden"} id="link2">
+                <div className="w-full gap-4 flex-wrap flex justify-center items-center">
+                  {planets.map((planet) => (
+                    <div className={'flex flex-col'}>
+                      <img className={'object-cover h-96 rounded-t-lg'} src={planet.image} alt={''} />
+                      <h1 className={'text-2xl px-1 text-white'}>
+                        {planet.title}
+                      </h1>
+                      <Link to={`/planet/${planet.id}`} className={'border border-2 rounded-md mt-4 border-[#E02312] text-white p-2 hover:bg-[#E02312] w-max'}>
+                        WATCH PREVIEW
+                      </Link>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className={openTab === 3 ? "block" : "hidden"} id="link3">
+                <div className="w-full gap-4 flex-wrap flex justify-center items-center">
+                  {planets.map((planet) => (
+                    <div className={'flex flex-col'}>
+                      <img className={'object-cover h-96 rounded-t-lg'} src={planet.image} alt={''} />
+                      <h1 className={'text-2xl px-1 text-white'}>
+                        {planet.title}
+                      </h1>
+                      <Link to={`/planet/${planet.id}`} className={'border border-2 rounded-md mt-4 border-[#E02312] text-white p-2 hover:bg-[#E02312] w-max'}>
+                        WATCH PREVIEW
+                      </Link>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+
+
+  )
+
+
+}
+export default Planet
diff --git a/src/components/planets/PlanetDetails.tsx b/src/components/planets/PlanetDetails.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+function PlanetDetails() {
+  return (
+    <div className="bg-black w-full min-h-screen mb-0">
+      <div className='border-b-2  border-white  m-auto w-11/12 mt-4' />
+      <div className='bg-gray-900 w-4/5 h-20 m-auto mt-10' />
+      <div className='container mx-auto md:container md:mx-auto mt-10 text-white flex  '>
+
+        <div className="md:flex items-start justify-center py-12 2xl:px-20 md:px-6 px-4">
+          <div className="xl:w-2/6 lg:w-2/5 w-80 md:block hidden">
+            <img src="https://i.postimg.cc/0ybdytWT/download.jpg" alt='banner' className="w-full" />
+          </div>
+          <div className="xl:w-3/5 md:w-1/2 lg:ml-8 md:ml-6 md:mt-0 mt-6">
+            <div className="border-b border-gray-200 pb-6">
+              <h1 className="lg:text-2xl text-xl font-semibold lg:leading-6 leading-7 text-white dark:text-white mt-2">Star Wars: A New Hope (Episode IV)
+              </h1>
+            </div>
+            <div>
+              <p className="text-base leading-4 mt-7 text-gray-600 dark:text-gray-300">Ratings: PG</p>
+              <p className="text-base leading-4 mt-4 text-gray-600 dark:text-gray-300">Release Date: 23th May 2020</p>
+              <p className="text-base leading-4 mt-4 text-gray-600 dark:text-gray-300">Genre: Adventure, Fantasy, Science Fiction</p>
+
+              <p className="xl:pr-48 text-base lg:leading-tight leading-normal text-gray-600 dark:text-gray-300 mt-7">Luke Skywalker begins a journey that will change the galaxy in Star Wars: Episode IV - A New Hope. Nineteen years after the formation of the Empire, Luke is thrust into the struggle of the Rebel Alliance when he meets Obi-Wan Kenobi, who has lived for years in seclusion on the desert planet of Tatooine. Obi-Wan begins Luke’s Jedi training as Luke joins him on a daring mission to rescue the beautiful Rebel leader Princess Leia from the clutches of Darth Vader and the evil Empire.</p>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  )
+}
+export default PlanetDetails