feat: rearranging components and setting up layout

app/dashboard/layout.tsx

@@ -0,0 +1,32 @@
+import ProfileCard from "@/components/ProfileCard";
+import FormDialog from "./dashboard";
+import Image from "next/image";
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="bg-teal-100 flex flex-col h-screen ">
+            <div className="p-4 flex flex-col h-screen rounded-sm">
+                <div className="flex flex-row">
+                    <div className="bg-teal-200 rounded-tl-xl">
+                        <Image
+                            src="/favicon.svg"
+                            alt="logo"
+                            width={36}
+                            height={36}
+                            className="bg-white rounded-t-xl w-14 h-14 shadow-lg p-2"
+                        />
+                    </div>
+                    <div className="bg-teal-200 h-14 justify-center items-center flex-grow shadow-lg rounded-r-3xl">
+                        <h1 className="text-2xl font-bold text-red-600 p-3">Dashboard</h1>
+                    </div>
+                </div>
+                <div className="flex flex-grow">
+                    <aside className="bg-teal-500 min-w-14 rounded-b-3xl" />
+                    <div className="flex-1 p-4">
+                        {children}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

app/dashboard/page.tsx

@@ -1,7 +1,35 @@
-import Image from 'next/image'
-import FormDialog from './dashboard'
-export default function Home() {
+import ProfileCard from "@/components/ProfileCard";
+import FormDialog from "./dashboard";
+import EventList from "@/components/events/EventList";
+
+export default function Dashboard() {
   return (
-    <FormDialog></FormDialog>
-  )
+    <>
+      <div className="flex flex-row h-16">
+        <ProfileCard
+          firstName="John"
+          lastName="Doe"
+          email="[email protected]"
+          phoneNumber="123-456-7890"
+          profileImage="https://via.placeholder.com/150"
+        />
+        <FormDialog />
+      </div>
+
+      <div className="flex-1 grow pt-12">
+        <div className="border-solid border-2 border-red-500 bg-white rounded-xl">
+          <EventList events={[
+            {
+              key: 1,
+              name: "Event 1",
+              start: "2021-01-01T",
+              end: "2021-01-01T",
+              volunteers: 5,
+              description: "Description 1"
+            },
+          ]} />
+        </div>
+      </div>
+    </>
+  );
 }

components/ProfileCard.tsx

@@ -0,0 +1,46 @@
+export default function ProfileCard(
+    {
+        firstName,
+        lastName,
+        email,
+        phoneNumber,
+        profileImage
+    }: ProfileCardProps
+) {
+    return (
+        <div className="flex items-center justify-between p-4 rounded-lg shadow-md bg-red-500">
+            <div className="flex items-center">
+                <div className="flex-shrink-0">
+                    <img className="h-12 w-12 rounded-full" src={profileImage} alt="" width={64} height={64} />
+                </div>
+                <div>
+                    <div className="text-sm font-medium text-gray-900">{`${firstName} ${lastName}`}</div>
+                    <div className="text-sm text-gray-500">{email}</div>
+                </div>
+            </div>
+            <div>
+                <div className="text-sm font-medium text-gray-900">{phoneNumber}</div>
+            </div>
+            <button
+                type="button"
+                className="p-2 bg-red-500 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 hover:bg-red-600"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                        fillRule="evenodd"
+                        d="M6.707 4.293a1 1 0 011.414 0L12 8.172l3.879-3.879a1 1 0 111.414 1.414L13.414 9.586l3.879 3.879a1 1 0 01-1.414 1.414L12 11l-3.879 3.879a1 1 0 01-1.414-1.414L10.586 10 6.707 6.121a1 1 0 010-1.414z"
+                        clipRule="evenodd"
+                    />
+                </svg>
+            </button>
+        </div>
+    );
+}
+
+export interface ProfileCardProps {
+    firstName: string;
+    lastName: string;
+    email: string;
+    phoneNumber: string;
+    profileImage: string;
+}

components/events/EventCard.tsx

@@ -0,0 +1,31 @@
+export interface EventCardProps {
+    key: number;
+    name: string;
+    start: string;
+    end: string;
+    volunteers: number;
+    description: string;
+}
+
+export default function EventCard({
+    key,
+    name,
+    start,
+    end,
+    volunteers,
+    description
+}: EventCardProps) {
+    return (
+        <div className="flex flex-col p-4">
+            <a className="text-4xl py-2 font-bold hover:bg-slate-700" href="/">{name}</a>
+            <hr className="rounded py-2"></hr>
+            <div className="text-lg py-2">Start time: {start} - End time: {end}</div>
+            <div className="flex flex-row py-2">
+                <div className="text-lg">Seeking </div>
+                <div className="text-lg px-1 font-black underline"> {volunteers} </div>
+                <div className="text-lg">volunteers</div>
+            </div>
+            <p className="text-lg py-2">{description}</p>
+        </div>
+    );
+}

components/events/EventList.tsx

@@ -0,0 +1,21 @@
+import EventCard, { EventCardProps } from "./EventCard";
+
+export default function EventList({ events }: { events: EventCardProps[] }) {
+    return (
+        <div className="flex flex-col items-center justify-between p-12">
+            <div className="flex flex-col">
+                {events.map(event => (
+                    <EventCard
+                        key={event.key}
+                        name={event.name}
+                        start={event.start}
+                        end={event.end}
+                        volunteers={event.volunteers}
+                        description={event.description}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+
+}