feat: added an unauthenticated home context with way to navigate to a…

…bout page with button

src/views/Home.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import "./Home.css";
 import { SingleList, CreateList } from "../components";
-import { List, User } from "../api/firebase";
+import { List, User } from "../api";
+import { NewUserHomeInfo } from "../views";
 
 interface Props {
 	data: List[];
@@ -10,26 +11,28 @@ interface Props {
 }
 
 export function Home({ data, setListPath, user }: Props) {
+	if (!user) {
+		return <NewUserHomeInfo />;
+	}
+
 	return (
-		<>
-			<div className="Home">
-				<p>
-					Hello from the home (<code>/</code>) page!
-				</p>
-				{user && (
-					<ul>
-						{data.map((list, index) => (
-							<SingleList
-								key={index}
-								name={list.name}
-								path={list.path}
-								setListPath={setListPath}
-							/>
-						))}
-						<CreateList user={user} setListPath={setListPath} />
-					</ul>
-				)}
-			</div>
-		</>
+		<div className="Home">
+			<p>
+				Hello from the home (<code>/</code>) page!
+			</p>
+			{user && (
+				<ul>
+					{data.map((list, index) => (
+						<SingleList
+							key={index}
+							name={list.name}
+							path={list.path}
+							setListPath={setListPath}
+						/>
+					))}
+					<CreateList user={user} setListPath={setListPath} />
+				</ul>
+			)}
+		</div>
 	);
 }

src/views/Layout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Outlet } from "react-router-dom";
-import { SignInButton, User } from "../api";
+import { Outlet, useNavigate } from "react-router-dom";
+import { User } from "../api";
 import { AuthenticatedNavBar } from "../components";
 
 import "./Layout.css";
@@ -10,15 +10,23 @@ interface Props {
 }
 
 export function Layout({ user }: Props) {
+	const navigate = useNavigate();
 	return (
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
 					<h1>Smart shopping list</h1>
 				</header>
 				<main className="Layout-main">
+					{user && (
+						<button
+							onClick={() => navigate("/about")}
+							aria-label="Navigate to the about application page."
+						>
+							about
+						</button>
+					)}
 					<Outlet />
-					{!user && <SignInButton />}
 				</main>
 				{user && <AuthenticatedNavBar />}
 			</div>

src/views/index.ts

@@ -4,3 +4,4 @@ export * from "./Layout";
 export * from "./authenticated/List";
 export * from "./unauthenticated/PageNotFound";
 export * from "./unauthenticated/About";
+export * from "./unauthenticated/NewUserHomeInfo";

src/views/unauthenticated/NewUserHomeInfo.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { SignInButton } from "../../api";
+
+export function NewUserHomeInfo() {
+	const navigate = useNavigate();
+
+	return (
+		<>
+			<h1>Welcome to APPLICATION NAME</h1>
+			<p>
+				The next best thing to having someone else do the shopping for you!
+				Create and manage smart lists learn your habits to let you know exactly
+				when you will need t
+			</p>
+
+			<article>
+				<p>New to APPLICATION NAME?</p>
+				<button
+					onClick={() => navigate("/about")}
+					aria-label="Navigate to the about application page."
+				>
+					Learn More
+				</button>
+			</article>
+
+			<article>
+				<p>Welcome Back:</p>
+				<SignInButton />
+			</article>
+		</>
+	);
+}