Skip to content

Commit

Permalink
Moved 'Header' & 'Main' component to layout
Browse files Browse the repository at this point in the history
  • Loading branch information
xKhronoz committed Jan 23, 2024
1 parent 7d16a49 commit af5678c
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 139 deletions.
40 changes: 17 additions & 23 deletions frontend/app/about/page.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,26 @@
"use client";

import Header from "@/app/components/header";
import Main from "@/app/components/ui/main-container";

export default function About() {

return (
<Main>
<Header />
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
<div className="max-w-2xl mx-auto p-4">
<div className="bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl md:text-4xl font-bold mb-4">About Smart Retrieval</h1>
<p className="text-l mb-4">
Welcome to Smart Retrieval, your go-to platform for efficient and streamlined information retrieval,
especially in the realm of legal and compliance documents.
</p>
<p className="text-l mb-4">
Our mission is to enhance user experiences at JTC by addressing key challenges such as manual search
inefficiencies and rigid file naming conventions.
</p>
<p className="text-l mb-4">
With cutting-edge technology, including Large Language Models (LLM) like GPT, BERT, and advanced chatbot
integration, we aim to revolutionize the way JTC employees access and comprehend crucial documents.
</p>
</div>
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
<div className="max-w-2xl mx-auto p-4">
<div className="bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl md:text-4xl font-bold mb-4">About Smart Retrieval</h1>
<p className="text-l mb-4">
Welcome to Smart Retrieval, your go-to platform for efficient and streamlined information retrieval,
especially in the realm of legal and compliance documents.
</p>
<p className="text-l mb-4">
Our mission is to enhance user experiences at JTC by addressing key challenges such as manual search
inefficiencies and rigid file naming conventions.
</p>
<p className="text-l mb-4">
With cutting-edge technology, including Large Language Models (LLM) like GPT, BERT, and advanced chatbot
integration, we aim to revolutionize the way JTC employees access and comprehend crucial documents.
</p>
</div>
</div>
</Main>
</div>
);
}
7 changes: 1 addition & 6 deletions frontend/app/chat/page.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
"use client";

import Header from "@/app/components/header";
import Main from "@/app/components/ui/main-container";
import ChatSection from "@/app/components/chat-section";

export default function Chat() {

return (
<Main>
<Header />
<ChatSection />
</Main>
<ChatSection />
);
}
2 changes: 1 addition & 1 deletion frontend/app/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ export default function Header() {
{/* Status Page Button/Indicator */}
<span className='flex items-center mr-1'>API:</span>
<NavLink href='/status'>
<div className="flex items-center mr-2 text-l transition duration-300 ease-in-out transform hover:scale-125">
<div className="flex items-center mr-2 text-xl transition duration-300 ease-in-out transform hover:scale-125">
{apiError ? (
<span role="img" aria-label="red circle">
🔴
Expand Down
9 changes: 8 additions & 1 deletion frontend/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from './providers'
import Header from "@/app/components/header";
import Main from "@/app/components/ui/main-container";

const inter = Inter({ subsets: ["latin"] });

Expand All @@ -27,7 +29,12 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className}>
<Providers>{children}</Providers>
<Providers>
<Main>
<Header />
{children}
</Main>
</Providers>
</body>
</html>
);
Expand Down
73 changes: 34 additions & 39 deletions frontend/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,49 @@
"use client";

import Header from "@/app/components/header";
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react'
import { IconSpinner } from '@/app/components/ui/icons'
import logo from '../public/smart-retrieval-logo.webp'
import Main from "@/app/components/ui/main-container";
import { useState } from 'react';
import { IconSpinner } from '@/app/components/ui/icons';
import logo from '../public/smart-retrieval-logo.webp';

export default function Home() {
const [isLoading, setIsLoading] = useState(false);

return (
<Main>
<Header />
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
<div className="max-w-2xl mx-auto p-4 text-center">
<div className="flex flex-col items-center mb-4 bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
<div className="flex flex-col md:flex-row items-center md:items-start">
<Image
src={logo}
alt="Smart Retrieval Logo"
width={150}
height={150}
priority
className="rounded-lg mb-4 md:mb-0 md:mr-4"
/>
<div className='flex flex-col mt-4'>
<h1 className="text-4xl font-bold mb-2 md:text-5xl">Smart Retrieval</h1>
<p className="text-lg md:text-xl text-gray-200">
Your intelligent solution for quick and accurate information retrieval.
</p>
</div>
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
<div className="max-w-2xl mx-auto p-4 text-center">
<div className="flex flex-col items-center mb-4 bg-gradient-to-r from-blue-500 to-indigo-500 text-white p-8 rounded-lg shadow-lg">
<div className="flex flex-col md:flex-row items-center md:items-start">
<Image
src={logo}
alt="Smart Retrieval Logo"
width={150}
height={150}
priority
className="rounded-lg mb-4 md:mb-0 md:mr-4"
/>
<div className='flex flex-col mt-4'>
<h1 className="text-4xl font-bold mb-2 md:text-5xl">Smart Retrieval</h1>
<p className="text-lg md:text-xl text-gray-200">
Your intelligent solution for quick and accurate information retrieval.
</p>
</div>
</div>
<div className="flex flex-col mt-8 text-center items-center max-w-full">
<p id='get-started-paragraph' className="text-xl text-gray-700 dark:text-gray-200 mb-4">
Experience the power of Smart Retrieval today!
</p>
<Link href="/chat" onClick={() => { setIsLoading(true); }}>
<div className="flex text-center items-center text-xl bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-125">
{isLoading ? (
<IconSpinner className="mr-2 animate-spin" />
) : null}
Get Started
</div>
</Link>
</div>
</div>
<div className="flex flex-col mt-8 text-center items-center max-w-full">
<p id='get-started-paragraph' className="text-xl text-gray-700 dark:text-gray-200 mb-4">
Experience the power of Smart Retrieval today!
</p>
<Link href="/chat" onClick={() => { setIsLoading(true); }}>
<div className="flex text-center items-center text-xl bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-125">
{isLoading ? (
<IconSpinner className="mr-2 animate-spin" />
) : null}
Get Started
</div>
</Link>
</div>
</div>
</Main>
</div>
);
}
7 changes: 1 addition & 6 deletions frontend/app/query/page.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
"use client";

import Header from "@/app/components/header";
import Main from "@/app/components/ui/main-container";
import QuerySection from "@/app/components/query-section";

export default function Query() {

return (
<Main>
<Header />
<QuerySection />
</Main>
<QuerySection />
);
}
7 changes: 1 addition & 6 deletions frontend/app/search/page.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
"use client";

import Header from "@/app/components/header";
import Main from "@/app/components/ui/main-container";
import SearchSection from "@/app/components/search-section";

export default function Search() {

return (
<Main>
<Header />
<SearchSection />
</Main>
<SearchSection />
);
}
55 changes: 25 additions & 30 deletions frontend/app/sign-in/page.tsx
Original file line number Diff line number Diff line change
@@ -1,45 +1,40 @@
"use client";

import { GoogleLoginButton, SGIDLoginButton } from '@/app/components/login-buttons';
import Header from "@/app/components/header";
import Main from "@/app/components/ui/main-container";

const SignInPage = () => {
return (
<Main>
<Header />
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
<div className="max-w-2xl mx-auto text-center">
<div className="flex flex-col items-center justify-center py-10 space-y-4">
<div className="bg-blue-500 text-white px-8 py-6 rounded-lg shadow-lg">
<h1 className="text-4xl font-bold mb-4">Sign in to Smart Retrieval!</h1>
<p className="text-lg text-gray-200 mb-4">
Your intelligent solution for quick and accurate information retrieval.
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
<div className="max-w-2xl mx-auto text-center">
<div className="flex flex-col items-center justify-center py-10 space-y-4">
<div className="bg-blue-500 text-white px-8 py-6 rounded-lg shadow-lg">
<h1 className="text-4xl font-bold mb-4">Sign in to Smart Retrieval!</h1>
<p className="text-lg text-gray-200 mb-4">
Your intelligent solution for quick and accurate information retrieval.
</p>
<div className="flex flex-col gap-4">
<GoogleLoginButton />
<SGIDLoginButton />
<p className="text-gray-200 text-sm">
Note: SGID login is only available via SingPass.
</p>
<div className="flex flex-col gap-4">
<GoogleLoginButton />
<SGIDLoginButton />
<p className="text-gray-200 text-sm">
Note: SGID login is only available via SingPass.
</p>
<div className="flex items-center justify-center gap-4">
<div className="w-full h-px bg-gray-300"></div>
</div>
<button
className="text-white font-bold hover:underline mt-4 rounded-md shadow-lg py-2 bg-gray-500 hover:bg-gray-300"
onClick={() => {
// Redirect back to the home page
window.location.href = '/';
}}
>
Cancel
</button>
<div className="flex items-center justify-center gap-4">
<div className="w-full h-px bg-gray-300"></div>
</div>
<button
className="text-white font-bold hover:underline mt-4 rounded-md shadow-lg py-2 bg-gray-500 hover:bg-gray-300"
onClick={() => {
// Redirect back to the home page
window.location.href = '/';
}}
>
Cancel
</button>
</div>
</div>
</div>
</div>
</Main>
</div>
);
};

Expand Down
49 changes: 22 additions & 27 deletions frontend/app/status/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
import useSWR from 'swr';
import { Button } from "@nextui-org/react";
import { IconSpinner } from '@/app/components/ui/icons';
import Header from "@/app/components/header";
import Main from "@/app/components/ui/main-container";

// Define the API endpoint
const healthcheck_api = process.env.NEXT_PUBLIC_HEALTHCHECK_API;
Expand Down Expand Up @@ -46,33 +44,30 @@ const StatusPage = () => {
};

return (
<Main>
<Header />
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full">
<div className="max-w-2xl space-y-2 p-4">
<h1 className="text-xl font-bold">Backend API Status</h1>
<p>
<span className="font-bold">Status: </span>
<span>{isValidating ? (
<IconSpinner className="inline ml-2 animate-spin" />
) : apiStatus}</span>
</p>
<p><span className="font-bold">Response Data: </span>{isValidating ? (
<div className="rounded-xl shadow-xl p-4 mb-8 max-w-5xl w-full bg-white dark:bg-zinc-700/30">
<div className="max-w-2xl space-y-2 p-4">
<h1 className="text-xl font-bold">Backend API Status</h1>
<p>
<span className="font-bold">Status: </span>
<span>{isValidating ? (
<IconSpinner className="inline ml-2 animate-spin" />
) : apiResponse}</p>
<Button
onClick={checkApiStatus}
disabled={isValidating} // Disable the button when isValidating is true
className="flex text-center items-center text-l disabled:bg-orange-400 bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105"
>
{isValidating ? (
<IconSpinner className="mr-2 animate-spin" />
) : null}
Refresh Status
</Button>
</div>
) : apiStatus}</span>
</p>
<p><span className="font-bold">Response Data: </span>{isValidating ? (
<IconSpinner className="inline ml-2 animate-spin" />
) : apiResponse}</p>
<Button
onClick={checkApiStatus}
disabled={isValidating} // Disable the button when isValidating is true
className="flex text-center items-center text-l disabled:bg-orange-400 bg-blue-500 text-white px-6 py-3 rounded-md font-bold transition duration-300 ease-in-out transform hover:scale-105"
>
{isValidating ? (
<IconSpinner className="mr-2 animate-spin" />
) : null}
Refresh Status
</Button>
</div>
</Main>
</div>
);
};

Expand Down

0 comments on commit af5678c

Please sign in to comment.