brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add basic nav bar

Browse Source
This commit is contained in:
Brandon Egger
2023-03-14 23:17:42 -05:00
parent a67c21a254
commit b9c5149567
4 changed files with 68 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Header.tsx Normal file
View File

@ -0,0 +1,55 @@
import { type NextPage } from "next";
import Image from 'next/image';
import Link from "next/link";
interface NavBarLinkProps {
href: string;
label: string;
}
const NavBarLink = ({href, label}: NavBarLinkProps) => {
return (
<li>
<Link href={href}>
<span className="inline-block py-2">{label}</span>
</Link>
</li>
);
}
const NavBar = () => {
return (
<nav className="bg-amber-400 flex flex-row justify-between px-4">
<ul id="left-nav-links" className="flex flex-row space-x-4">
<NavBarLink href='/' label='Home'/>
<NavBarLink href='/' label='Resources'/>
<NavBarLink href='/' label='About'/>
</ul>
<ul id="right-nav-links" className="flex flex-row space-x-4">
<NavBarLink href='/' label='Home'/>
<NavBarLink href='/' label='Home'/>
<NavBarLink href='/' label='Contact Us'/>
</ul>
</nav>
)
}
const Header: NextPage = () => {
return <>
<div id="logo-row" className="flex flex-row p-4">
<div>
<Image alt="Ear listening" src="listening-ear.svg" width={64} height={64}/>
</div>
<div id="header-title" className="grow grid place-items-center">
<h1 className="text-center text-xl font-bold">Center for Auditory Training Resources</h1>
</div>
<div>
<Image alt="Ear listening" src="listening-ear.svg" width={64} height={64}/>
</div>
</div>
<NavBar/>
</>
};
export default Header;

2
src/pages/_app.tsx
View File

@ -5,6 +5,7 @@ import { SessionProvider } from "next-auth/react";
import { api } from "~/utils/api";
import "~/styles/globals.css";
import Header from "~/components/Header";
const MyApp: AppType<{ session: Session | null }> = ({
Component,
@ -12,6 +13,7 @@ const MyApp: AppType<{ session: Session | null }> = ({
}) => {
return (
<SessionProvider session={session}>
<Header />
<Component {...pageProps} />
</SessionProvider>
);

71
src/pages/index.tsx
View File

@ -1,83 +1,20 @@
import { type NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { signIn, signOut, useSession } from "next-auth/react";
import { api } from "~/utils/api";
const Home: NextPage = () => {
const hello = api.example.hello.useQuery({ text: "from tRPC" });
return (
<>
<Head>
<title>Create T3 App</title>
<meta name="description" content="Generated by create-t3-app" />
<title>ATR</title>
<meta name="description" content="University of Iowa Center for Auditory Training Resources" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
<h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
</h1>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
<Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
href="https://create.t3.gg/en/usage/first-steps"
target="_blank"
>
<h3 className="text-2xl font-bold">First Steps →</h3>
<div className="text-lg">
Just the basics - Everything you need to know to set up your
database and authentication.
</div>
</Link>
<Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
href="https://create.t3.gg/en/introduction"
target="_blank"
>
<h3 className="text-2xl font-bold">Documentation →</h3>
<div className="text-lg">
Learn more about Create T3 App, the libraries it uses, and how
to deploy it.
</div>
</Link>
</div>
<div className="flex flex-col items-center gap-2">
<p className="text-2xl text-white">
{hello.data ? hello.data.greeting : "Loading tRPC query..."}
</p>
<AuthShowcase />
</div>
</div>
<main>
<h1>under construction</h1>
</main>
</>
);
};
export default Home;
const AuthShowcase: React.FC = () => {
const { data: sessionData } = useSession();
const { data: secretMessage } = api.example.getSecretMessage.useQuery(
undefined, // no input
{ enabled: sessionData?.user !== undefined },
);
return (
<div className="flex flex-col items-center justify-center gap-4">
<p className="text-center text-2xl text-white">
{sessionData && <span>Logged in as {sessionData.user?.name}</span>}
{secretMessage && <span> - {secretMessage}</span>}
</p>
<button
className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
onClick={sessionData ? () => void signOut() : () => void signIn()}
>
{sessionData ? "Sign out" : "Sign in"}
</button>
</div>
);
};