atulização Hearder(Card)

Front
FGA0138-MDS-Ajax · Jun 25, 2024 · 5c6baa5 · 5c6baa5
2 parents 86b835b + c6835f4
commit 5c6baa5
Show file tree

Hide file tree

Showing 13 changed files with 191 additions and 42 deletions.
diff --git a/projeto/client/app/auth/home/page.tsx b/projeto/client/app/auth/home/page.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { cn } from '@/lib/utils';
 import { Bebas_Neue } from 'next/font/google';
 import { GridTimes } from '@/components/auth/home/grid';
+import { GridLiberta } from '@/components/auth/home/gird-liberta';
+import { GridBrasileirao } from '@/components/auth/home/grid-brasileirao';
 
 const font = Bebas_Neue({
   subsets: ['latin'],
@@ -13,19 +15,32 @@ export default function HomePage() {
     <div className="min-h-full w-full">
         <div className="h-full grid grid-cols-2 divide-x-2 divide-black">
             <div className="pt-2 pl-4 pr-4">
+              <br/>
                 <h1 className={cn(
-                'text-4xl font-semibold text-black drop-shadow-md',
+                'text-4xl font-semibold text-black drop-shadow-md text-center',
                 font.className
               )}>Rodada X</h1>
-
+              <br/>
               <GridTimes/>
             </div>
 
             <div className="pt-2 pl-4">
+              <br/>
                 <h1 className={cn(
-                'text-4xl font-semibold text-black drop-shadow-md',
+                'text-4xl font-semibold text-black drop-shadow-md text-center',
                 font.className
               )}>Time Usuário</h1>
+              <br/>
+                <h1 className={cn(
+                'text-4x1 font-semibold text-black drop-shadow-md',
+                font.className
+              )}>Brasileirão</h1>
+              <GridBrasileirao></GridBrasileirao>
+              <h1 className={cn(
+                'text-4x1 font-semibold text-black drop-shadow-md',
+                font.className
+              )}>Libertadores</h1>
+              <GridLiberta></GridLiberta>
             </div>    
           </div>
     </div>   

diff --git a/projeto/client/app/page.tsx b/projeto/client/app/page.tsx
@@ -2,6 +2,7 @@ import { Bebas_Neue } from 'next/font/google';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { LoginButton } from '@/components/auth/login-button';
+import { CadastroButton } from '@/components/auth/cadastro-button';
 
 const font = Bebas_Neue({
   subsets: ['latin'],
@@ -31,11 +32,11 @@ export default function Home() {
             <p>
 
             </p>
-            <LoginButton>
+            <CadastroButton>
               <Button className="bg-[#22eb4d6b] text-white" size="lg">
                 Cadastre-se
               </Button>
-            </LoginButton>
+            </CadastroButton>
           </div>
         </div>
         {/* Coluna da Direita */}

diff --git a/projeto/client/components/Navbar.tsx b/projeto/client/components/Navbar.tsx
@@ -1,13 +1,20 @@
 import Image from 'next/image';
+import { HomeButton } from '@/components/auth/home-button';
 
 const Navbar = () => {
   return (
-    <nav className="bg-[#005B14] p-4">
-      <div className="container mx-auto flex justify-center items-center">
-        <Image src="/logo.png" alt="Logo" width={60} height={60} />
+    <nav className="bg-[#005B14] p-4 relative">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="container mx-auto flex justify-center items-center">
+          <Image src="/logo.png" alt="Logo" width={60} height={60} />
+        </div>
+        <div className="absolute right-8 top-5 bg-transparent text-black hover:bg-gray-200 text-lg font-semibold py-2 px-4 rounded-lg">
+          <HomeButton mode="redirect">Home</HomeButton>
+        </div>
       </div>
     </nav>
   );
 };
 
 export default Navbar;
+
diff --git a/projeto/client/components/Sidebar.tsx b/projeto/client/components/Sidebar.tsx
@@ -23,10 +23,10 @@ const Sidebar = () => {
       <button
         type="button"
         onClick={toggleSidebar}
-        className="absolute top-1 left-4 inline-flex justify-center items-center w-10 h-10 rounded-md border border-gray-300 shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none "
+        className="absolute top-1 left-4 inline-flex justify-center items-center w-10 h-10 bg-transparent text-black hover:bg-gray-200 text-lg font-semibold rounded-lg focus:outline-none "
       >
         <svg
-          className="w-6 h-6"
+          className="w-8 h-8"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -77,7 +77,7 @@ const Sidebar = () => {
                     className="flex items-center w-full p-2 text-base text-white transition duration-75 group hover:bg-[#004B14] py-4"
                     onClick={toggleDropdown}
                   >
-                    <span className="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap ">
+                    <span className="flex-1 text-left rtl:text-right whitespace-nowrap ">
                       Campeonatos
                     </span>
                     <svg

diff --git a/projeto/client/components/auth/cadastro-button.tsx b/projeto/client/components/auth/cadastro-button.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+interface LoginButtonProps {
+    children: React.ReactNode;
+    mode?: "modal" | "redirect",
+    asChild?: boolean;
+};
+
+export const CadastroButton = ({
+    children,
+    mode = "redirect",
+    asChild
+}: LoginButtonProps) => {
+    const router = useRouter();
+
+    const onClick = () => {
+        router.push("/auth/register");
+    };
+
+    if (mode === "modal") {
+        return (
+            <span>
+             TODO: Implement modal       
+            </span>
+        )
+    }
+
+    return(
+        <span onClick={onClick} className="cursor-pointer">
+            {children}
+        </span>
+    )
+}
diff --git a/projeto/client/components/auth/cadastro-form.tsx b/projeto/client/components/auth/cadastro-form.tsx
@@ -65,7 +65,7 @@ export const CadastroForm = () => {
 
     return (
         <CardWrapper
-            headerLabel="Bem vindo!"
+            headerLabel="Cadastro"
             showSocial
         >
 
@@ -147,7 +147,7 @@ export const CadastroForm = () => {
                         type="submit"
                         className="bg-[#005B14] w-full"
                     >
-                        Login
+                        Finalizar Cadastro
                     </Button>
                 </form>
             </Form>

diff --git a/projeto/client/components/auth/header.tsx b/projeto/client/components/auth/header.tsx
@@ -18,7 +18,7 @@ export const Header = ({
         <div className="w-full flex flex-col gap-y-4 items-center justify-center">
             <img src="/logo.png" alt="Login Icon" className="w-12 h-auto" />
             <h1 className={cn("text-3xl font-semibold", font.className)}>
-                Login
+                Onde é o Jogo?
             </h1>
             <p className="text-muted-foreground text-sm">
                 {label}

diff --git a/projeto/client/components/auth/home-button.tsx b/projeto/client/components/auth/home-button.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+interface LoginButtonProps {
+    children: React.ReactNode;
+    mode?: "modal" | "redirect",
+    asChild?: boolean;
+};
+
+export const HomeButton = ({
+    children,
+    mode = "redirect",
+    asChild
+}: LoginButtonProps) => {
+    const router = useRouter();
+
+    const onClick = () => {
+        router.push("/auth/home");
+    };
+
+    if (mode === "modal") {
+        return (
+            <span>
+             TODO: Implement modal       
+            </span>
+        )
+    }
+
+    return(
+        <span onClick={onClick} className="cursor-pointer">
+            {children}
+        </span>
+    )
+}
diff --git a/projeto/client/components/auth/home/gird-liberta.tsx b/projeto/client/components/auth/home/gird-liberta.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { Match } from "@/app/models/match";
+import { CardTimes } from "@/components/auth/home/card-times";
+
+// Cria um vetor de 8 instâncias de Match
+const matches: Match[] = [
+  new Match("Libertadores", "24/06/2024 13:30", "Time A", "Time B", ["Globo", "SporTV"]),
+];
+
+export const GridLiberta = () => {
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {matches.map((match, index) => (
+        <CardTimes key={index} match={match} />
+      ))}
+    </div>
+  );
+};
diff --git a/projeto/client/components/auth/home/grid-brasileirao.tsx b/projeto/client/components/auth/home/grid-brasileirao.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { Match } from "@/app/models/match";
+import { CardTimes } from "@/components/auth/home/card-times";
+
+// Cria um vetor de 8 instâncias de Match
+const matches: Match[] = [
+  new Match("Brasileirão", "24/06/2024 13:30", "Time A", "Time B", ["Globo", "SporTV"]),
+];
+
+export const GridBrasileirao = () => {
+  return (
+    <div className="grid grid-cols-2 gap-2 ">
+      {matches.map((match, index) => (
+        <CardTimes key={index} match={match} />
+      ))}
+    </div>
+  );
+};
diff --git a/projeto/client/components/auth/login-form.tsx b/projeto/client/components/auth/login-form.tsx
@@ -36,7 +36,7 @@ export const LoginForm = () => {
 
     return (
         <CardWrapper
-            headerLabel="Bem vindo!"
+            headerLabel="Login"
             backButtonLabel="Não tem uma conta?"
             backButtonHref="/auth/register"
             showSocial

diff --git a/projeto/client/package-lock.json b/projeto/client/package-lock.json
diff --git a/projeto/client/package.json b/projeto/client/package.json
@@ -22,6 +22,7 @@
     "react-hook-form": "^7.52.0",
     "react-icons": "^5.2.1",
     "react-select": "^5.8.0",
+    "rimraf": "^5.0.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",