new website beginning

src/components/HeaderItem.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link"
+
+type HeaderItemProps = {
+    content: string,
+    linkTo: string,
+    onClick?: any, // don't even wanna bother
+    newWindow?: boolean
+}
+export default function HeaderItem(props: HeaderItemProps) {
+    console.log(props, props.newWindow ? "_blank" : "self")
+    if (props.onClick) {
+        return (
+            <>
+                <button className="inline hover:text-gray-500 hover:underline pr-2 "
+                    onClick={props.onClick}
+                >
+                    {props.content}
+                </button>
+            </>
+        )
+    } else {
+        return (
+            <p className="inline pr-2 hover:text-gray-500 hover:underline">
+                <Link href={props.linkTo} target={props.newWindow ? "_blank" : "_self"}>
+                    {props.content}
+                </Link>
+            </p>
+        )
+    }
+}

src/components/ReviewCard.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image"
+
+type ReviewCardProps = {
+    title: string,
+    image: string,
+    url: string
+}
+
+export default function ReviewCard(props: ReviewCardProps) {
+    return (
+        <>
+            <div className="inline pr-4 pb-2">
+                <Image alt={props.title + " cover"} width="160" height="160" src={props.image} />
+                <p className="font-bold pt-2 text-center">{props.title}</p>
+            </div>
+        </>
+    )
+}

src/components/header.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import {useSession, signIn, signOut} from 'next-auth/react';
+import HeaderItem from "./HeaderItem";
+
+export default function Header() {
+    const { data: session, status } = useSession()
+
+    return (
+        <>
+            <div className="text-white w-52 pt-2 pb-4 mx-auto">
+                <p className="text-2xl font-bold">alex</p>
+                <div className="inline-block pb-2">
+                    <HeaderItem content="home" linkTo="/" />
+                    <HeaderItem content="reviews" linkTo="/reviews" />
+                    <HeaderItem content="contact" linkTo="/contact" />
+                    <HeaderItem content={status == "unauthenticated" ? "login" : "logout" } onClick={status == "authenticated" ? signOut : signIn} linkTo="" />
+                </div>
+                <hr />
+            </div>
+        </>
+    )
+}