Skip to content

Commit

Permalink
'loading agregado'
Browse files Browse the repository at this point in the history
  • Loading branch information
@ErickSalazar44
ErickSalazar44 committed Sep 16, 2023
1 parent d84d0b1 commit 4f01ec8
Show file tree
Hide file tree
Showing 41 changed files with 667 additions and 471 deletions.
1 change: 1 addition & 0 deletions .env
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_API_URL=eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2MTdiOGI2ODFiZGIwMjI3YjUzNDY0ZjJkMzU3ZDhlMSIsInN1YiI6IjY0ZjYwOWYzZWJiOTlkMDExZTBiNmUwZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.qcqXt8lOPeki5sxBQhLiWMp_OLjztLp2_4Pd95uaWTg
1 change: 1 addition & 0 deletions .env.example
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_API_URL='Tienes que crear una cuenta en theMovieDb y poner tu token'
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"@reduxjs/toolkit": "^1.9.5",
"@uiball/loaders": "^1.3.0",
"axios": "^1.5.0",
"node-vibrant": "^3.2.1-alpha.1",
"react": "^18.2.0",
Expand Down
Binary file removed public/logo.png
View file
Binary file not shown.
Binary file removed public/noImage.png
View file
Binary file not shown.
1 change: 0 additions & 1 deletion public/vite.svg
View file

This file was deleted.

74 changes: 38 additions & 36 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@

import { Route, Routes } from 'react-router-dom'
import HomePage from './pages/HomePage'
import { NavBar } from './components/Header/NavBar'
import MovieForId from './pages/MovieForId'
import SearchMovie from './pages/SearchMovie'
import Footer from './components/Footer/Footer'
import { Route, Routes } from "react-router-dom";
import HomePage from "./pages/HomePage";
import { NavBar } from "./components/Header/NavBar";
import MovieForId from "./pages/MovieForId";
import SearchMovie from "./pages/SearchMovie";
import Footer from "./components/Footer/Footer";

function App() {

const fondo = {
backgroundColor: "#292929",
backgroundImage: "linear-gradient(to top, #000000, #000000)",
backgroundSize: "cover",
backgroundRepeat: "repeat",
}

return (

<div className='min-h-screen w-full' style={fondo}>
<NavBar />
<Routes>
{/* Home page */}
<Route path='/' element={<HomePage/>}/>

{/* Search Movie */}
<Route path='/search' element={<SearchMovie/>}/>

{/* Ruta Detalles tv */}
<Route path='/tv/:id' element={<MovieForId path={'/tv'}/>} />

{/* Ruta Detalles Movie */}
<Route path='/movie/:id' element={<MovieForId path={'/movie'}/>} />
</Routes>
<Footer/>
</div>
)
// Modificar el color de Fondo
const fondo = {
backgroundColor: "#292929",
backgroundImage: "linear-gradient(to top, #000000, #000000)",
backgroundSize: "cover",
backgroundRepeat: "repeat",
};


return (
<div className='min-h-screen w-full select-none' style={fondo}>
<NavBar />
<Routes>
{/* Home page */}
<Route path='/' element={<HomePage />} />

{/* Search Movie */}
<Route path='/search' element={<SearchMovie />} />

{/* Ruta Detalles tv */}
<Route path='/tv/:id' element={<MovieForId path={"/tv"} />} />

{/* Ruta Detalles Movie */}
<Route
path='/movie/:id'
element={<MovieForId path={"/movie"} />}
/>
</Routes>
<Footer />
</div>
);
}

export default App
export default App;
10 changes: 8 additions & 2 deletions src/components/Button.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
import {PiVideo} from 'react-icons/pi'
import './style/btn.css'
import { useNavigate } from 'react-router-dom'
const Button = ({text}) => {
const Button = ({text, noNavigate}) => {

const navigate = useNavigate()

const navegar = () => {
if (!noNavigate) {
navigate('/search')
}
}

return (
<div className='transition-all duration-500'>
<button
onClick={() => navigate('/search')}
onClick={navegar}
className="custom-button"
>
<span className='relative z-10'>
Expand Down
158 changes: 108 additions & 50 deletions src/components/Header/NavBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import { AiOutlineMenu } from "react-icons/ai";
import { IoMdClose } from "react-icons/io";
import { MdKeyboardArrowRight } from "react-icons/md";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useDispatch } from "react-redux";
import { Link, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { setType } from "../../store/slices/typeMovieSlice";
import { viewNavigate } from "../../utils/animationNavigate";

export const NavBar = () => {
const dispatch = useDispatch();
const searchType = useSelector((state) => state.type);

const [isShowMenu, setisShowMenu] = useState(false);
const [scrollY, setScrollY] = useState(0);
Expand Down Expand Up @@ -39,32 +41,59 @@ export const NavBar = () => {
setisShowMenu(!isShowMenu);
};

const navigate = useNavigate();

return (
<>
<header className={`fixed top-0 z-50 text-white w-full`}>
<div
className={`absolute top-0 left-0 w-full h-[74.5px] lg:h-[84px] z-40 ${headerClass} transition-all duration-500 ease-in-out opacity-[0.96] `}
></div>
<nav className='relative top-0 left-0 w-full h-[74.5px] lg:h-[84px] flex justify-between items-center z-50 px-8 md:px-10 lg:px-12 2xl:px-16'>
<div className=' flex justify-center gap-7 lg:relative' >
<AiOutlineMenu onClick={menuOpen} className="w-[24px] h-[24px] cursor-pointer text-neutral-400 " />
<div className="hidden lg:flex lg:gap-7 lg:font-bold lg:absolute lg:left-14 lg:text-neutral-400 ">
<Link className="hover:text-white hover:opacity-100 transition-colors duration-300" to='/search' onClick={() => dispatch(setType("movie"))} >Películas</Link>
<Link className="hover:text-white hover:opacity-100 transition-colors duration-300" to='/search' onClick={() => dispatch(setType("tv"))} >Series</Link>
<div className=' flex justify-center gap-7 lg:relative'>
<AiOutlineMenu
onClick={menuOpen}
className='w-[24px] h-[24px] cursor-pointer text-neutral-400 '
/>
<div className='hidden lg:flex lg:gap-7 lg:font-bold lg:absolute lg:left-14 lg:text-neutral-400 '>
<a
className={`hover:text-white hover:opacity-100 transition-colors duration-300 cursor-pointer ${
searchType === "movie" &&
"text-white opacity-100"
}`}
onClick={() => {
viewNavigate("/search", navigate);
dispatch(setType("movie"));
}}
>
Películas
</a>
<a
className={`hover:text-white hover:opacity-100 transition-colors duration-300 cursor-pointer ${
searchType === "tv" &&
"text-white opacity-100"
}`}
onClick={() => {
viewNavigate("/search", navigate);
dispatch(setType("tv"));
}}
>
Series
</a>
</div>
</div>
<div className='w-28 lg:w-36'>
<Link to='/'>
<img src='/logo.webp' alt='logo' />
</Link>
<img
className='cursor-pointer'
onClick={() => viewNavigate("/", navigate)}
src='/logo.webp'
alt='logo'
/>
</div>
<div
className='cursor-pointer'
onClick={() => console.log("ir a buscar peliculas")}
>
<Link to='/search'>
<GoSearch className="w-[24px] h-[24px] cursor-pointer text-neutral-100 " />
</Link>
<div className='cursor-pointer'>
<a onClick={() => viewNavigate("/search", navigate)}>
<GoSearch className='w-[24px] h-[24px] cursor-pointer text-neutral-100 ' />
</a>
</div>
</nav>
</header>
Expand All @@ -74,76 +103,105 @@ export const NavBar = () => {
}`}
>
<div className='h-20 flex items-center'>
<IoMdClose className="w-[24px] h-[24px] lg:w-[26px] lg:h-[26px] cursor-pointer" onClick={menuOpen} />
<IoMdClose
className='w-[24px] h-[24px] lg:w-[26px] lg:h-[26px] cursor-pointer'
onClick={menuOpen}
/>
</div>
<div className='flex flex-col gap-5 font-normal text-lg lg:text-2xl lg:gap-8 mb-3'>
<div >
<Link
className="hover:text-white hover:opacity-100 transition-colors duration-300"
<div>
<a
className={`hover:text-white hover:opacity-100 transition-colors duration-300`}
to='/'
onClick={() => handleSearchTypeChange("tv")}
onClick={() => {
handleSearchTypeChange("tv");
viewNavigate("/", navigate);
}}
>
Inicio
</Link>
</a>
</div>
<div >
<Link
className="hover:text-white hover:opacity-100 transition-colors duration-300"
<div>
<a
className={`hover:text-white hover:opacity-100 transition-colors duration-300`}
to='/search'
onClick={() => handleSearchTypeChange("tv")}
onClick={() => {
handleSearchTypeChange("tv");
viewNavigate("/search", navigate);
}}
>
Series
</Link>
</a>
</div>
<div >
<Link
className="hover:text-white hover:opacity-100 transition-colors duration-300"
<div>
<a
className='hover:text-white hover:opacity-100 transition-colors duration-300'
to='/search'
onClick={() => handleSearchTypeChange("movie")}
onClick={() => {
handleSearchTypeChange("movie");
viewNavigate("/search", navigate);
}}
>
Películas
</Link>
</a>
</div>
<div >
<Link
className="hover:text-white hover:opacity-100 transition-colors duration-300"
<div>
<a
className='hover:text-white hover:opacity-100 transition-colors duration-300'
to='/search'
onClick={() => handleSearchTypeChange()}
onClick={() => {
handleSearchTypeChange("movie");
viewNavigate("/search", navigate);
}}
>
Originales
</Link>
</a>
</div>
<div >
<Link
className="hover:text-white hover:opacity-100 transition-colors duration-300"
<div>
<a
className='hover:text-white hover:opacity-100 transition-colors duration-300'
to='/search'
onClick={() => handleSearchTypeChange()}
onClick={() => {
handleSearchTypeChange("movie");
viewNavigate("/search", navigate);
}}
>
Tendencias
</Link>
</a>
</div>
<div >
<Link
className="hover:text-white hover:opacity-100 transition-colors duration-300"
<div>
<a
className='hover:text-white hover:opacity-100 transition-colors duration-300'
to='/search'
onClick={() => handleSearchTypeChange()}
onClick={() => {
handleSearchTypeChange("movie");
viewNavigate("/search", navigate);
}}
>
Ver mas
</Link>
</a>
</div>
</div>
<div className='flex flex-col gap-4 mt-8'>
<span className='w-full h-[1px] bg-colorMenu opacity-30'></span>
<div className='flex justify-between lg:text-2xl lg:gap-8 items-center'>
<a className="hover:text-white hover:opacity-100 transition-colors duration-300" href='#'>Géneros</a>
<a
className='hover:text-white hover:opacity-100 transition-colors duration-300'
onClick={() => {
handleSearchTypeChange("movie");
viewNavigate("/search", navigate);
}}
>
Géneros
</a>
<MdKeyboardArrowRight size={24} />
</div>
<span className='w-full h-[1px] bg-colorMenu opacity-30'></span>
</div>
</div>
<div
onClick={menuOpen}
className={`fixed w-full z-10 right-0 top-0 min-h-screen bg-black opacity-40 ${
className={`fixed w-full z-[60] right-0 top-0 min-h-screen bg-black opacity-40 ${
isShowMenu ? "fade-out" : "fade-in hidden"
}`}
></div>
Expand Down
Loading

0 comments on commit 4f01ec8

Please sign in to comment.