muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added hero component

Browse source
This commit is contained in:
Juthatip McDevitt 2024-07-12 14:30:29 -05:00
parent 0e996de07a
commit aad69da614
6 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
task_management_app/public/img.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
task_management_app/public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

3
task_management_app/src/app/layout.tsx
View file

@ -6,7 +6,7 @@ import Header from "@/components/Header";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Task Management App", title: "Agenda board",
description: "Generated by create next app", description: "Generated by create next app",
}; };
@ -17,6 +17,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<link rel="shortcut icon" href="/logo.png" />
<body className={inter.className}> <body className={inter.className}>
<Header/> <Header/>
<main className="p-10"> <main className="p-10">

6
task_management_app/src/app/page.tsx
View file

@ -1,5 +1,6 @@
import Boards from "@/components/Boards"; import Boards from "@/components/Boards";
import LoginView from "@/components/views/LoginView"; import LoginView from "@/components/views/LoginView";
import Hero from "@/components/Hero";
import { authOptions } from "@/lib/authOptions"; import { authOptions } from "@/lib/authOptions";
import { getServerSession } from "next-auth"; import { getServerSession } from "next-auth";
import Link from "next/link"; import Link from "next/link";
@ -10,7 +11,10 @@ export default async function Home() {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
if(!session){ if(!session){
return( return(
<LoginView/> <>
<Hero/>
<LoginView/>
</>
); );
} }
return ( return (

7
task_management_app/src/components/Header.tsx
View file

@ -3,13 +3,17 @@ import { getServerSession } from 'next-auth'
import LogoutButton from './LogoutButton'; import LogoutButton from './LogoutButton';
import LoginButton from './LoginButton'; import LoginButton from './LoginButton';
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image';
import Logo from '../../public/logo.png'
const Header = async () => { const Header = async () => {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
return ( return (
<header className="p-4 border border-b-[#9BBEC8] px-4 md:px-10"> <header className="p-4 border border-b-[#9BBEC8] px-4 md:px-10">
<div className='flex justify-between items-center'> <div className='flex justify-between items-center'>
<Link href="/" className="logo text-[#427D9D] font-semibold">Task Management</Link> <Link href="/" className="logo text-[#427D9D] font-semibold">
<Image src={Logo} alt='logo' className='w-[90px]'/>
</Link>
<div> <div>
{session && ( {session && (
<div className='flex justify-center items-center'> <div className='flex justify-center items-center'>
@ -21,7 +25,6 @@ const Header = async () => {
)} )}
{!session && ( {!session && (
<div className='text-sm md:text-base'> <div className='text-sm md:text-base'>
Not logged in
<LoginButton/> <LoginButton/>
</div> </div>
)} )}

18
task_management_app/src/components/Hero.tsx Normal file
View file

@ -0,0 +1,18 @@
import Image from 'next/image'
import React from 'react'
import Img_hero from '../../public/img.png'
function Test() {
return (
<div>
<div className='items-center text-center my-10 pb-5'>
<p className='uppercase text-4xl md:text-5xl font-semibold drop-shadow-xl font-outline-2 text-[#37B7C3] mb-5'>Manage your work flow with us!</p>
</div>
<div className='flex justify-center'>
<Image src={Img_hero} alt='img-hero'/>
</div>
</div>
)
}
export default Test