breathe, =, breathe

pages/index.js

@@ -2,15 +2,19 @@ import Head from "next/head";
 import styles from "../styles/Home.module.css";
 import Header from "../components/templates/header";
 import Generator from "../components/templates/generator";
+import Manual from "../components/templates/manual";
 import Nav from "../components/templates/nav";
 import UserTop from "../components/templates/userTop";
 import Footer from "../components/templates/footer";
 import { useState } from "react";
 import { useSession, signIn, signOut } from "next-auth/react";
-import { Button } from "evergreen-ui";
+import { Pane, Button, Tab, Tablist } from "evergreen-ui";
 
 export default function Home() {
 	const { data: session } = useSession();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [tabs] = useState(["auto", "manual"]);
+	const [realTabs] = useState([Generator, Manual]);
 
 	if (session) {
 		return (
@@ -27,7 +31,41 @@ export default function Home() {
 				<main className="flex flex-1 flex-col items-center">
 					<div className="flex flex-col items-center p-8 mt-12 rounded-md shadow-md transition-all duration-500 hover:shadow-xl">
 						<Header />
-						<Generator />
+						<Tablist>
+							{tabs.map((tab, index) => (
+								<Tab
+									key={tab}
+									id={tab}
+									onSelect={() => setSelectedIndex(index)}
+									isSelected={index === selectedIndex}
+								>
+									{tab}
+								</Tab>
+							))}
+						</Tablist>
+						<Pane>
+							{realTabs.map((tab, index) =>
+								index == 1 ? (
+									<Pane
+										key={tab}
+										id={`panel-${tab}`}
+										role="tabpanel"
+										display={index === selectedIndex ? "block" : "none"}
+									>
+										<Manual />
+									</Pane>
+								) : (
+									<Pane
+										key={tab}
+										id={`panel-${tab}`}
+										role="tabpanel"
+										display={index === selectedIndex ? "block" : "none"}
+									>
+										<Generator />
+									</Pane>
+								)
+							)}
+						</Pane>
 					</div>
 				</main>
 			</div>