header

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build", 
     "start": "next start",
     "lint": "next lint",
     "postinstall": "prisma generate"

src/app/page.tsx

@@ -7,7 +7,7 @@ export default function Home() {
   return (
     <div className="flex items-center justify-center h-screen">
       {/* Example Button (ExampleButton.tsx in components folder) */}
-      <TopHeader/>
+      <TopHeader userType="volunteer" />
       {/* <ExampleButton buttonText="Add User" /> */}
     </div>
   );

src/components/TopHeader.tsx

@@ -1,21 +1,29 @@
 import { Icon } from "@iconify/react/dist/iconify.js";
 
-// interface TopHeaderProps {
-//   buttonText: string;
-// }
+interface TopHeaderProps {
+  userType: string;
+}
 
-// TODO: create a div section for the profile on the right
-// use a placeholder icon for the profile picture
-// style the header so that the button and profile are on opposite ends of the
-// header (you can use space-between)
-
-const TopHeader = () => {
+const TopHeader = ({ userType }: TopHeaderProps) => {
+  // different button text and icon depending on if the user is a volunteer or admin
+  const buttonText = userType === "admin" ? "Create new event" : "Check in";
+  const icon = userType === "admin" ? "ic:baseline-plus" : "mdi:checkbox-outline";
   return (
-    <div className="w-screen border border-black py-8 px-6">
-        <button className=" flex flex-row gap-x-2 bg-teal-600 p-2.5 px-3 text-white rounded-md">
-            <Icon icon="ic:baseline-plus" width="20" height="20"/>
-            Create new event
-        </button>
+    <div className="flex flex-row w-screen border border-black py-8 px-6 place-content-between">
+      <button className="flex flex-row gap-x-2 bg-teal-600 p-2.5 px-3 text-white rounded-md place-items-center">
+        <Icon icon={icon} width="20" height="20" />
+        {buttonText}
+      </button>
+      <div className="flex flex-row justify-self-end place-items-center gap-x-2">
+        <h1 className="font-medium">SP</h1>
+        <Icon icon="ion:switch" width="40" height="40" />
+        <h1 className="text-teal-600 font-medium">EN</h1>
+        <Icon icon="gg:profile" width="40" height="40" className="mx-2" />
+        <div>
+          <h1 className="font-bold"> An Tran </h1>
+          <h2 className="text-gray-500"> {userType} </h2>
+        </div>
+      </div>
     </div>
   );
 };