only one photoheader

src/components/photoHeader.tsx

@@ -3,37 +3,47 @@
 import React from "react";
 import Image from "next/image";
 
-const PhotoHeader = () => {
+export interface IPhotoHeaderProps {
+  name: string | null;
+  image: string | null;
+  email: string | null;
+}
+
+const PhotoHeader = ({ name, image, email }: IPhotoHeaderProps) => {
   return (
     <>
-      <div className="pb-9">
-        <div className="relative m-4 md:m-5 lg:m-9">
-          <Image
-            className="rounded-2xl object-cover"
-            src={"/student_home/header3.jpg"}
-            alt={
-              "Photo of flowers on an old book with a faded photo of two people"
-            }
-            width={2000}
-            height={500}
-          />
-          <div className="absolute right-0 -bottom-12 flex h-20 w-[98%] items-center rounded-2xl bg-white bg-opacity-90 p-3 backdrop-blur-sm md:-bottom-10">
+        <div className="relative flex flex-col">
+          <div className="h-[150px] w-full">
             <Image
-              className="rounded-xl"
-              src={"/student_home/profile_photo_pic.jpeg"}
-              alt={"Profile Photo"}
-              width={58.5}
-              height={58.5}
+              className="object-cover"
+              src={"/student_home/header3.jpg"}
+              alt={ "Photo of flowers on an old book with a faded photo of two people"}
+              layout="fill"
+              // width={2000}
+              // height={150}
             />
+          </div>
+
+          <div className="flex absolute right-0 bottom-0 w-[100%] h-[75px] items-center bg-white bg-opacity-80 p-3 pl-9 backdrop-blur-sm">
+            <div className="h-[58.5px] w-[58.5px]">
+              <Image
+                className="rounded-xl"
+                src={image ?? "/student_home/profile_photo_pic.jpeg"}
+                alt={"Profile Photo"}
+                width={58.5}
+                height={58.5}
+              />
+            </div>
             <div className="flex flex-col pl-3 text-neutral-600">
-              <h5 className="text-base font-bold">Angela Han</h5>
-              <p className="text-sm">[email protected]</p>
+              <h5 className="text-lg font-bold">{name ?? "Admin"}</h5>
+              <p className="text-md font-light text-neutral-500">
+                {email ?? "[email protected]"}
+              </p>
             </div>
           </div>
         </div>
-      </div>
     </>
   );
 };
 
-export default PhotoHeader;
+export default PhotoHeader;

src/pages/admin-home.tsx

@@ -1,5 +1,5 @@
 import type { GetServerSidePropsContext, NextPage } from "next";
-import AdminPhotoHeader from "@components/adminPhotoHeader";
+import PhotoHeader from "@components/photoHeader";
 
 import Image from "next/image";
 import { getServerAuthSession } from "@server/common/get-server-auth-session";
@@ -81,8 +81,9 @@ const Home: NextPage<IAdminProps> = ({
   }, [deactivated, pending, refreshData, selectedTab, seniors, students]);
 
   return (
-    <div className="h-max w-full">
-      <AdminPhotoHeader name={me.name} image={me.image} email={me.email} />
+
+    <div className="h-max w-full flex flex-col">
+      <PhotoHeader name={me.name} image={me.image} email={me.email} />
       <div className="resize-y">
         <div className="flex w-full bg-white pl-9 h-[50px]">
           {tabs.map((tab) => (

src/pages/student-home.tsx

@@ -1,10 +1,25 @@
-import type { NextPage } from "next";
+import type { GetServerSidePropsContext, NextPage } from "next";
 import Head from "next/head";
 import PhotoHeader from "@components/photoHeader";
-
+import { Approval, Senior, User } from "@prisma/client";
+import { useRouter } from "next/router";
+import { getServerAuthSession } from "@server/common/get-server-auth-session";
 import { SeniorGrid } from "@components/profileTile";
+import { useCallback, useMemo, useState } from "react";
+import { TileData } from "@components/profileTile/profileTile";
+
+
+type IStudentProps = Awaited<ReturnType<typeof getServerSideProps>>["props"] & {
+  redirect: undefined;
+};
+
+const Home: NextPage<IStudentProps> = ({
+  me, 
+  seniors
+}) => {
+
+
 
-const Home: NextPage = () => {
   return (
     <>
       <Head>
@@ -13,7 +28,7 @@ const Home: NextPage = () => {
       </Head>
 
       <div className="h-max bg-taupe">
-        <PhotoHeader />
+        <PhotoHeader name={me.name} image={me.image} email={me.email}/>
         <div className="px-3 md:px-5 lg:px-9">
           <h1 className="mt-1 text-xl font-semibold">My Senior</h1>
           <button className="my-3 inline-block h-0.5 w-1/3 min-w-[2in] bg-dark-teal md:w-[12%] lg:w-[12%] xl:w-[12%] 2xl:w-[12%]"></button>
@@ -28,3 +43,62 @@ const Home: NextPage = () => {
 Home.displayName = "private";
 
 export default Home;
+
+export const getServerSideProps = async (
+  context: GetServerSidePropsContext
+) => {
+  const session = await getServerAuthSession(context);
+
+  if (!session || !session.user) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  if (!prisma) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  const user = await prisma.user.findUnique({
+    where: {
+      id: session.user.id,
+    },
+  });
+
+  if (!user) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
+
+  const seniors = await prisma.senior.findMany();
+  const users = await prisma.user.findMany();
+  const students = users.filter(
+    ({ approved }) => approved === Approval.APPROVED
+  );
+  const pending = users.filter(({ approved }) => approved === Approval.PENDING);
+  const deactivated = users.filter(
+    ({ approved }) => approved === Approval.DENIED
+  );
+
+  return {
+    props: {
+      me: user,
+      students,
+      pending,
+      deactivated,
+      seniors,
+    },
+  };
+};