fix: homepage design

NIAEFEUP · Jan 25, 2025 · 924b1b5 · 924b1b5
1 parent f55f908
commit 924b1b5
Show file tree

Hide file tree

Showing 16 changed files with 1,085 additions and 1,096 deletions.
diff --git a/website/inertia/components/common/containers/card.tsx b/website/inertia/components/common/containers/card.tsx
@@ -0,0 +1,5 @@
+import Container from '.'
+
+export default function CardContainer({ children }: { children?: React.ReactNode }) {
+  return <Container className="mt-24 max-w-md">{children}</Container>
+}
diff --git a/website/inertia/components/common/containers/index.tsx b/website/inertia/components/common/containers/index.tsx
@@ -0,0 +1,9 @@
+import { cn } from "~/lib/utils"
+
+export default function Container({ className, children }: { className?: string, children?: React.ReactNode }) {
+    return (
+        <div className={cn("w-full container mx-auto px-8", className)}>
+            {children}
+        </div>
+    )
+}
diff --git a/website/inertia/components/common/hero.tsx b/website/inertia/components/common/hero.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { cn } from "~/lib/utils";
+
+export default function Hero({ className, children }: { className?: string, children?: React.ReactNode }) {
+    return (
+        <div className={cn("h-screen overflow-y-clip relative flex-non", className)}>
+            {children}
+        </div>
+    )
+}
diff --git a/website/inertia/components/common/navbar.tsx b/website/inertia/components/common/navbar.tsx
@@ -0,0 +1,81 @@
+import { useForm } from '@inertiajs/react'
+import { Link } from '@tuyau/inertia/react'
+import { Button, buttonVariants } from '~/components/ui/button'
+import { useAuth } from '~/hooks/use_auth'
+import { useTuyau } from '~/hooks/use_tuyau'
+import { cn } from '~/lib/utils'
+import Container from './containers'
+
+/*
+import { Menu } from "lucide-react";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+} from "./ui/navigation-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+import { Button } from "./ui/button";
+
+type PageRoute = {
+  href: string;
+  title: string;
+};
+
+*/
+
+function LoginButton() {
+  return (
+    <Link route="pages:auth.login" className={buttonVariants({ variant: 'secondary' })}>
+      Login
+    </Link>
+  )
+}
+
+function LogoutButton() {
+  const tuyau = useTuyau()
+  const { post } = useForm()
+
+  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    post(tuyau.$url('actions:auth.logout'))
+  }
+
+  return (
+    <form onSubmit={onSubmit} method="post">
+      <Button type="submit" variant="secondary">
+        Logout
+      </Button>
+    </form>
+  )
+}
+
+export function Navbar({ className }: { className?: string }) {
+  const auth = useAuth()
+
+  return (
+    <nav className={cn('w-full', className)}>
+      <Container>
+        <div className="w-full py-6 flex flex-row justify-between items-center">
+          <Link route="pages:home">
+            <img className="w-20 md:w-28 h-auto" src="/images/logo-white.svg" alt="Logótipo do ENEI" />
+            <span className='sr-only'>Ir para a página inicial</span>
+          </Link>
+          {auth.state === 'authenticated' ? (
+            <LogoutButton />
+          ) : (
+            auth.state === 'unauthenticated' && <LoginButton />
+          )}
+        </div>
+      </Container>
+    </nav>
+  )
+}
diff --git a/website/inertia/components/common/page.tsx b/website/inertia/components/common/page.tsx
@@ -0,0 +1,23 @@
+import { Head } from '@inertiajs/react'
+import React from 'react'
+import { cn } from '~/lib/utils'
+import { Navbar } from './navbar'
+
+export default function Page({
+  title,
+  className,
+  children,
+}: {
+  title: string
+  className?: string
+  children?: React.ReactNode
+}) {
+  return (
+    <div className={cn('w-full min-h-dvh scroll-smooth relative flex flex-col', className)}>
+      <Head title={title} />
+      <Navbar className="sticky top-0 z-10 grow-0" />
+
+      {children}
+    </div>
+  )
+}
diff --git a/website/inertia/components/navbar.tsx b/website/inertia/components/navbar.tsx
diff --git a/website/public/images/background.jpeg → website/inertia/images/background.jpeg b/website/public/images/background.jpeg → website/inertia/images/background.jpeg
diff --git a/website/inertia/layouts/base.tsx b/website/inertia/layouts/base.tsx
@@ -1,21 +1,19 @@
 import { Head } from '@inertiajs/react'
-import NavBar from '../components/navbar'
+import { Navbar } from '~/components/common/navbar'
 import { Toaster } from '~/components/ui/toaster'
 import { cn } from '~/lib/utils'
 
 type Props = {
-  title: string,
+  title: string
   children?: React.ReactNode
   className?: string
 }
 
 export default function BaseLayout({ title, children, className }: Props) {
   return (
-    <div className="min-h-screen flex flex-col bg-enei-blue scroll-smooth">
+    <div className="w-full min-h-dvh bg-enei-blue scroll-smooth relative flex flex-col">
       <Head title={title} />
-      <div className="sticky left-0 right-0 top-0 z-30 flex-none">
-        <NavBar />
-      </div>
+      <Navbar className="sticky top-0 z-10" />
       <div className={cn('flex-1', className)}>
         {children}
         <Toaster />

diff --git a/website/inertia/pages/auth/login.tsx b/website/inertia/pages/auth/login.tsx
@@ -6,8 +6,8 @@ import { Label } from '~/components/ui/label'
 import { useError } from '~/hooks/use_error'
 import { useForm } from '@inertiajs/react'
 import { cn } from '~/lib/utils'
-import BaseLayout from '~/layouts/base'
-import CardLayout from '~/layouts/card'
+import Page from '~/components/common/page'
+import CardContainer from '~/components/common/containers/card'
 
 export default function Login() {
   const oauthError = useError('oauth')
@@ -24,8 +24,8 @@ export default function Login() {
   }
 
   return (
-    <BaseLayout title="Iniciar Sessão">
-      <CardLayout>
+    <Page title="Iniciar Sessão" className='bg-enei-blue'>
+      <CardContainer>
         <Card className={cn(oauthError && 'border-2 border-red-600')}>
           <CardHeader>
             <CardTitle className="text-2xl">Iniciar Sessão</CardTitle>
@@ -112,7 +112,7 @@ export default function Login() {
             {oauthError && <p className="text-sm text-red-600 text-center mt-4">{oauthError}</p>}
           </CardContent>
         </Card>
-      </CardLayout>
-    </BaseLayout>
+      </CardContainer>
+    </Page>
   )
 }
diff --git a/website/inertia/pages/auth/register.tsx b/website/inertia/pages/auth/register.tsx
@@ -5,8 +5,8 @@ import { Label } from '~/components/ui/label'
 import { useError } from '~/hooks/use_error'
 import { cn } from '~/lib/utils'
 import { useForm } from '@inertiajs/react'
-import BaseLayout from '~/layouts/base'
-import CardLayout from '~/layouts/card'
+import Page from '~/components/common/page'
+import CardContainer from '~/components/common/containers/card'
 
 export default function Login() {
   const oauthError = useError('oauth')
@@ -23,8 +23,8 @@ export default function Login() {
   }
 
   return (
-    <BaseLayout title="Criar conta">
-      <CardLayout>
+    <Page title="Criar conta" className="bg-enei-blue">
+      <CardContainer>
         <Card className={cn(oauthError && 'border-2 border-red-600')}>
           <CardHeader>
             <CardTitle className="text-2xl">Criar conta</CardTitle>
@@ -112,7 +112,7 @@ export default function Login() {
             {oauthError && <p className="text-sm text-red-600 text-center mt-4">{oauthError}</p>}
           </CardContent>
         </Card>
-      </CardLayout>
-    </BaseLayout>
+      </CardContainer>
+    </Page>
   )
 }