add router to social-app

venturars · Sep 23, 2024 · 6bcd3ba · 6bcd3ba
1 parent 31d08d7
commit 6bcd3ba
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 11 deletions.
diff --git a/staff/ventura-rodriguez/social-app/package.json b/staff/ventura-rodriguez/social-app/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
+    "@tailwindcss/typography": "0.5.15",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",
@@ -12,6 +13,8 @@
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-router": "6",
+    "react-router-dom": "6",
     "react-scripts": "5.0.1",
     "web-vitals": "2.1.4"
   },

diff --git a/staff/ventura-rodriguez/social-app/public/index.html b/staff/ventura-rodriguez/social-app/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="es">
+<html lang="es" data-theme="cyberpunk">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/staff/ventura-rodriguez/social-app/src/App.jsx b/staff/ventura-rodriguez/social-app/src/App.jsx
@@ -1,10 +1,15 @@
 import React from "react";
-import { Landing } from "./pages";
+import { Landing, Login, SignUp } from "./pages";
+import { Route, Routes } from "react-router-dom";
 
 function App() {
   return (
     <main className="App">
-      <Landing />
+      <Routes>
+        <Route path="/" element={<Landing />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/sign-up" element={<SignUp />} />
+      </Routes>
       {/* 
         - Landing
         - Login

diff --git a/staff/ventura-rodriguez/social-app/src/index.css b/staff/ventura-rodriguez/social-app/src/index.css
@@ -3,5 +3,9 @@
 @tailwind utilities;
 
 body {
-  @apply bg-black w-screen h-screen max-w-full text-white;
+  @apply bg-black w-screen h-screen max-w-full text-white font-mono;
+}
+
+.prose {
+  @apply text-white;
 }
diff --git a/staff/ventura-rodriguez/social-app/src/index.jsx b/staff/ventura-rodriguez/social-app/src/index.jsx
@@ -3,11 +3,14 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

diff --git a/staff/ventura-rodriguez/social-app/src/pages/Landing.jsx b/staff/ventura-rodriguez/social-app/src/pages/Landing.jsx
@@ -1,4 +1,5 @@
 import { Component } from "react";
+import { Link } from "react-router-dom";
 
 class Landing extends Component {
   render() {
@@ -9,12 +10,22 @@ class Landing extends Component {
             <h1 className="text-3xl">Bienvenido a mi Social App</h1>
           </div>
           <div className="grid grid-cols-2 gap-8">
-            <button className="btn btn-primary btn-md">
+            <Link
+              to="/sign-up"
+              target="_self"
+              rel="next"
+              className="btn btn-primary btn-md"
+            >
               Ir al formulario de registro
-            </button>
-            <button className="btn btn-secondary btn-md">
+            </Link>
+            <Link
+              to="/login"
+              target="_self"
+              rel="next"
+              className="btn btn-secondary btn-md"
+            >
               Ir al formulario de entrada
-            </button>
+            </Link>
           </div>
         </div>
       </section>

diff --git a/staff/ventura-rodriguez/social-app/src/pages/Login.jsx b/staff/ventura-rodriguez/social-app/src/pages/Login.jsx
@@ -0,0 +1,9 @@
+import { Component } from "react";
+
+class Login extends Component {
+  render() {
+    return <>Soy el login</>;
+  }
+}
+
+export default Login;
diff --git a/staff/ventura-rodriguez/social-app/src/pages/SignUp.jsx b/staff/ventura-rodriguez/social-app/src/pages/SignUp.jsx
@@ -0,0 +1,9 @@
+import { Component } from "react";
+
+class SignUp extends Component {
+  render() {
+    return <>Soy el signup</>;
+  }
+}
+
+export default SignUp;
diff --git a/staff/ventura-rodriguez/social-app/src/pages/index.jsx b/staff/ventura-rodriguez/social-app/src/pages/index.jsx
@@ -1,3 +1,7 @@
 import _Landing from "./Landing.jsx";
+import _Login from "./Login.jsx";
+import _SignUp from "./SignUp.jsx";
 
 export const Landing = _Landing;
+export const Login = _Login;
+export const SignUp = _SignUp;
diff --git a/staff/ventura-rodriguez/social-app/tailwind.config.js b/staff/ventura-rodriguez/social-app/tailwind.config.js
@@ -1,8 +1,64 @@
+const { fontFamily, screens } = require("tailwindcss/defaultTheme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  mode: "jit",
   content: ["./src/**/*.{jsx,js}"],
   theme: {
-    extend: {},
+    fontFamily: fontFamily,
+    screens: {
+      "3xs": { min: "320px" },
+      "2xs": { min: "380px" },
+      xs: { min: "475px" },
+      ...screens,
+      "max-xl": { max: "1279px" },
+      "max-lg": { max: "1023px" },
+      "max-md": { max: "767px" },
+      "max-sm": { max: "639px" },
+      "max-xs": { max: "474px" },
+      "max-2xs": { max: "379px" },
+      "max-3xs": { max: "319px" },
+    },
+    aspectRatio: {
+      "1/1": "1 / 1",
+      "3/4": "3 / 4",
+    },
   },
-  plugins: [require("daisyui")],
+  daisyui: {
+    themes: [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",
+    ],
+  },
+  plugins: [require("@tailwindcss/typography"), require("daisyui")],
 };