Merge pull request #42 from gogixweb/frontend

Issue: Rotas criadas para diferentes interfaces #41

frontend/src/Login.jsx

@@ -0,0 +1,49 @@
+import ApiCalendar from "react-google-calendar-api";
+import React from 'react';
+import {} from 'react-router-dom'
+
+const config = {
+  clientId: process.env.GOOGLE_CLIENT_ID,
+  apiKey: process.env.GOOGLE_API_KEY,
+  scope: "https://www.googleapis.com/auth/calendar",
+  discoveryDocs: [
+    "https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest",
+  ],
+};
+
+
+
+const apiCalendar = new ApiCalendar(config);
+export default class Login extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleItemClick = this.handleItemClick.bind(this);
+  }
+  handleItemClick(event, name) {
+    if (name === 'sign-in') {
+    console.log( apiCalendar.handleAuthClick())
+
+    } else if (name === 'sign-out') {
+      apiCalendar.handleSignoutClick();     }
+  }
+
+
+  render() {
+    return (
+      <div>
+          <button
+              onClick={(e) => this.handleItemClick(e, 'sign-in')}
+
+          >
+            sign-in
+          </button>
+          <button
+              onClick={(e) => this.handleItemClick(e, 'sign-out')}
+          >
+            sign-out
+          </button>
+       </div>
+      );
+  }
+}
+

frontend/src/index.jsx

@@ -1,10 +1,35 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+import Time from "./routes/Time.jsx";
 import './index.css'
 
+const router = createBrowserRouter([
+
+  {
+      path:"/",
+      element: <App/>,
+
+  },
+  {
+    path: "/hello",
+    element: <div> hello</div>,
+  },
+  {
+    path: "/Time",
+    element: <Time />,
+  },
+
+
+]);
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
+
   </React.StrictMode>,
 )

frontend/src/routes/Time.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import BahiaLogo from '../assets/bahia.png'; // Corrigindo o caminho para os arquivos de imagem
+import flamengologo from '../assets/flamengo.png';
+import palmeiraslogo from '../assets/palmeiras.png';
+
+class Time extends React.Component {
+  // Função para mostrar o escudo quando o botão é clicado
+  showLogo = (teamName) => {
+    alert(`Você selecionou o ${teamName}`);
+    // Aqui você pode adicionar lógica para exibir o escudo
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Escolha seu time favorito para Acompanhar:</h1>
+        <button onClick={() => this.showLogo('Bahia')}> {/* Alterando para this.showLogo */}
+          <img src={BahiaLogo} alt="Bahia" style={{ width: '50px', height: '50px' }} /> Bahia
+        </button>
+        <button onClick={() => this.showLogo('Flamengo')}> {/* Alterando para this.showLogo e corrigindo o nome do time */}
+          <img src={flamengologo} alt="Flamengo" style={{ width: '50px', height: '50px' }} /> Flamengo 
+        </button>
+        <button onClick={() => this.showLogo('Palmeiras')}> {/* Alterando para this.showLogo e corrigindo o nome do time */}
+          <img src={palmeiraslogo} alt="Palmeiras" style={{ width: '50px', height: '50px' }} /> Palmeiras 
+        </button>
+        {/* Adicione mais botões conforme necessário */}
+      </div>
+    );
+  }
+}
+
+export default Time;

frontend/src/routes/root.jsx

@@ -0,0 +1,43 @@
+export default function Root() {
+    return (
+      <>
+        <div id="sidebar">
+          <h1>React Router Contacts</h1>
+          <div>
+            <form id="search-form" role="search">
+              <input
+                id="q"
+                aria-label="Search contacts"
+                placeholder="Search"
+                type="search"
+                name="q"
+              />
+              <div
+                id="search-spinner"
+                aria-hidden
+                hidden={true}
+              />
+              <div
+                className="sr-only"
+                aria-live="polite"
+              ></div>
+            </form>
+            <form method="post">
+              <button type="submit">New</button>
+            </form>
+          </div>
+          <nav>
+            <ul>
+              <li>
+                <a href={`/contacts/1`}>Your Name</a>
+              </li>
+              <li>
+                <a href={`/contacts/2`}>Your Friend</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+        <div id="detail"></div>
+      </>
+    );
+  }