├── src
├── routes
│ ├── Home.jsx
│ └── Login.jsx
├── components
│ ├── RequireAuth.jsx
│ └── Navbar.jsx
├── index.css
├── context
│ └── UserProvider.jsx
├── main.jsx
├── App.jsx
└── favicon.svg
├── vite.config.js
├── .gitignore
└── index.html
/src/routes/Home.jsx:
--------------------------------------------------------------------------------
1 | const Home = () => {
2 | return (
3 | <>
4 | Home
5 |
6 | );
7 | };
8 |
9 | export default Home;
10 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()]
7 | })
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/components/RequireAuth.jsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { UserContext } from "../context/UserProvider";
3 | import { Navigate } from "react-router-dom";
4 |
5 | const RequireAuth = ({ children }) => {
6 | const { user } = useContext(UserContext);
7 |
8 | if (!user) {
9 | return ;
10 | }
11 |
12 | return children;
13 | };
14 |
15 | export default RequireAuth;
16 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/context/UserProvider.jsx:
--------------------------------------------------------------------------------
1 | import { createContext, useState } from "react";
2 |
3 | export const UserContext = createContext();
4 |
5 | const UserProvider = ({ children }) => {
6 | const [user, setUser] = useState(false);
7 |
8 | return (
9 |
10 | {children}
11 |
12 | );
13 | };
14 |
15 | export default UserProvider;
16 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | import { BrowserRouter } from "react-router-dom";
7 | import UserProvider from "./context/UserProvider";
8 |
9 | ReactDOM.render(
10 |
11 |
12 |
13 |
14 | ,
15 | document.getElementById("root")
16 | );
17 |
--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { NavLink } from "react-router-dom";
3 | import { UserContext } from "../context/UserProvider";
4 | const Navbar = () => {
5 | const { user, setUser } = useContext(UserContext);
6 |
7 | return (
8 |
9 | {user ? (
10 | <>
11 | Inicio
12 |
13 |
14 | ) : (
15 | Login
16 | )}
17 |
18 | );
19 | };
20 |
21 | export default Navbar;
22 |
--------------------------------------------------------------------------------
/src/routes/Login.jsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { UserContext } from "../context/UserProvider";
3 | import { useNavigate } from "react-router-dom";
4 |
5 | const Login = () => {
6 | const { user, setUser } = useContext(UserContext);
7 | const navegate = useNavigate();
8 |
9 | const handleClickLogin = () => {
10 | setUser(true);
11 | navegate("/");
12 | };
13 |
14 | return (
15 | <>
16 | Login
17 | {user ? "En línea" : "Offline"}
18 |
19 |
20 | );
21 | };
22 |
23 | export default Login;
24 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { Routes, Route } from "react-router-dom";
2 |
3 | import Login from "./routes/Login";
4 | import Home from "./routes/Home";
5 | import Navbar from "./components/Navbar";
6 | import RequireAuth from "./components/RequireAuth";
7 |
8 | const App = () => {
9 | return (
10 | <>
11 |
12 | APP
13 |
14 |
18 |
19 |
20 | }
21 | />
22 | } />
23 |
24 |
25 | );
26 | };
27 |
28 | export default App;
29 |
--------------------------------------------------------------------------------
/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------