Merge branch 'home_page_mesclado_responsividade_auth'

package.json

@@ -13,10 +13,12 @@
   "dependencies": {
     "@hookform/resolvers": "^3.1.1",
     "autoprefixer": "10.4.14",
+    "axios": "^1.4.0",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.10",
     "next": "13.4.10",
     "postcss": "8.4.26",
+    "query-string": "^8.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.2",

src/components/Article.tsx

@@ -19,4 +19,4 @@ export const Article = ({imageData, alt="", title, content, textFirst=false}: Ar
       </div>
     </article>
   )
-}
+}

src/components/AuthButton.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import { ReactNode } from 'react';
+
+interface AuthButtonProps {
+  onClick: Function;
+  className: string;
+  children: ReactNode;
+}
+
+export const AuthButton = ({ onClick, className, children }: AuthButtonProps) => {
+  return (
+    <button onClick={() => onClick()} className={className}>
+      {children}
+    </button>
+  );
+};

src/components/HamburgerMenu/HamburgerMenu.module.css

@@ -0,0 +1,28 @@
+.hideMenuNav {
+    display: block;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    visibility: hidden;
+    transition: opacity 0.5s, visibility 0.5s;
+    z-index: 10;
+  }
+
+  .showMenuNav {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.5s, visibility 0.5s;
+    position: absolute;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background: #000000c9;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+  }

src/components/HamburgerMenu/index.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react"; // import state
+
+
+import styles from "./HamburgerMenu.module.css"
+
+
+
+
+
+
+
+export default function Header(props: any) {
+  const [isNavOpen, setIsNavOpen] = useState(false); // initiate isNavOpen state with false
+
+  return (
+    <div className={"flex items-center justify-between border-b border-gray-400 " + props.className}>
+      <nav>
+        <section className="flex lg:hidden">
+          <div
+            className="space-y-2"
+            onClick={() => setIsNavOpen((prev) => !prev)} // toggle isNavOpen state on click
+          >
+            <span className="block h-0.5 w-8 animate-pulse bg-white"></span>
+            <span className="block h-0.5 w-8 animate-pulse bg-white"></span>
+            <span className="block h-0.5 w-8 animate-pulse bg-white"></span>
+          </div>
+
+          <div className={isNavOpen ? styles.showMenuNav : styles.hideMenuNav}>
+            <div
+              className="absolute top-0 right-0 px-8 py-8"
+              onClick={() => setIsNavOpen(false)} // change isNavOpen state to false to close the menu
+            >
+              <svg
+                className="h-8 w-8 text-white"
+                viewBox="0 0 60 60"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <line x1="60" y1="12" x2="12" y2="60" />
+                <line x1="12" y1="12" x2="60" y2="60" />
+              </svg>
+            </div>
+            <ul className="flex flex-col items-center justify-between min-h-[250px] ">
+              {props.children}
+            </ul>
+          </div>
+        </section>
+
+        <ul className="DESKTOP-MENU hidden space-x-8 lg:flex">
+          {props.children}
+        </ul>
+      </nav>
+
+    </div>
+  );
+}

src/components/Header.tsx

@@ -3,22 +3,24 @@ import Image from 'next/image'
 
 import Logo from '@/public/logo.svg'
 
-export const Header = () => {
-  return(
-    <header className="w-full flex gap-60 items-center text-white">
-      <Image src={""} alt="" height={86} width={160}/>
+import HamburgerMenu from "./HamburgerMenu"
+
 
-      <nav className="flex gap-24">
-        <Link href="/">
-          Home
-        </Link>
-        <Link href="/fluxo">
-          Fluxo
-        </Link>
-        <Link href="/pedido">
-          Pedido
-        </Link>
+export const Header = () => {
+  return (
+    <header className="flex items-center text-white max-w-full w-full py-4 px-6 fixed top-0 bg-[#00000099] shadow">
+      <Image src={"/logo.png"} alt="" height={60} width={200} />
+      <nav className="grid grid-flow-col gap-20 md:flex md:flex-wrap md:justify-end md:w-full mr-20 hidden md:block">
+        <Link className="hover:animate-pulse" href="#">Home</Link>
+        <Link className="hover:animate-pulse" href="#article-fluxo">Fluxo</Link>
+        <Link className="hover:animate-pulse" href="#article-pedido">Pedido</Link>
       </nav>
+      <HamburgerMenu className="ml-auto md:hidden">
+
+      <Link href="#">Home</Link>
+        <Link href="#article-fluxo">Fluxo</Link>
+        <Link href="#article-pedido">Pedido</Link>
+      </HamburgerMenu>
     </header>
   )
-}
+}

src/layouts/PublicLayout.tsx

@@ -5,17 +5,20 @@ import { Open_Sans } from 'next/font/google'
 import { Header } from "../components/Header"
 
 interface PublicLayoutProps {
-  children: ReactNode
+  children: ReactNode,
+  className?: string | undefined,
 }
 
-const openSans = Open_Sans({subsets: ['latin'], weight: ["700"]})
+const openSans = Open_Sans({ subsets: ['latin'], weight: ["700"] })
 
-export const PublicLayout = ({children}: PublicLayoutProps) => {
+export const PublicLayout = ({ children, className }: PublicLayoutProps) => {
   return (
     <>
-      <div className={`${openSans.className}`}>
+      <div className={`${openSans.className} max-w-full ${className}`}>
         <Header />
-        {children}
+        <div>
+          {children}
+        </div>
       </div>
     </>
   )

src/pages/_app.tsx

@@ -5,7 +5,7 @@ import '../styles/globals.css'
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
-      <Component {...pageProps} />
+      <Component className="w-full" {...pageProps} />
     </>
   )
 }

src/pages/_document.tsx

@@ -1,13 +1,25 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 
-export default function Document() {
-  return (
-    <Html lang="pt-BR">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: any) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html lang="pt-BR">
+        <Head>
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          {/* Adicione aqui o link para o arquivo CSS gerado pelo Tailwind */}
+
+          {/* Adicione outras tags meta, link ou script que você precisar */}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

src/pages/admin.tsx

@@ -0,0 +1,83 @@
+import { NextPage } from "next";
+import Head from "next/head";
+
+
+import Image, { StaticImageData } from 'next/image'
+import { AuthButton } from "../components/AuthButton"
+
+
+
+
+
+
+
+import qs from "query-string";
+import axios from "axios";
+import { useEffect } from "react";
+
+
+
+//todo neltech client_id cf0189d7c923b324ca0c
+
+function redirectToGithub() {
+  const GITHUB_AUTH_URL = 'https://github.com/login/oauth/authorize';
+  const params = {
+    response_type: '8',
+    scope: 'gustavocodigo test8888',
+    client_id: "85e38c2f6d14b47f25a2",
+    redirect_uri: window.location.href,
+    state: 'test-t5'
+  }
+
+  const queryStrings = qs.stringify(params);
+  const authorizationUrl = `${GITHUB_AUTH_URL}?${queryStrings}`;
+  window.location.href = authorizationUrl;
+}
+
+
+function clickAuth() {
+    redirectToGithub()
+}
+
+
+
+const Home: NextPage = () => {
+    useEffect( () => {
+        try {
+            const querys = qs.parseUrl(window.location.href).query
+            if ( querys.code != undefined) {
+                alert("CODIGO DO GITHUB: "+ querys.code)
+            }
+        }catch(e) {
+            console.log(e)
+        }
+    },[])
+    return (
+        <>
+            <Head>
+                <title>Neltech - Home</title>
+            </Head>
+            <main className="bg-comp-home bg-no-repeat bg-bottom text-white mx-auto max-w-full  px-8 lg:px-12  w-[1400px] px-10px h-full ">
+                <div className="w-full h-full flex items-center justify-center mt-[200px] flex-col w-[400px] m-auto max-w-full bg-white p-8 text-black shadow-2xl">
+
+                    <div className="w-[450px] max-w-full">
+                        <h1 className="font-bold">Bem vindo(a)</h1>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit maiores necessitatibus nam cumque esse ducimus laudantium quo perferendis iure asperiores fugit libero, hic reprehenderit incidunt quisquam illo deleniti est. Harum?</p>
+                    </div>
+
+                    <AuthButton className="mt-4 flex text-black items-center bg-red gap-6 bg-white w-full rounded p-1 pr-2 font-bold shadow-2xl border border-gray-500" onClick={clickAuth}>
+                        <Image src="/github.svg" width="32" height="32" alt="" className="color-black"></Image>
+                        Entrar com GitHub
+                    </AuthButton>
+
+
+                </div>
+
+
+            </main>
+
+        </>
+    )
+}
+
+export default Home