brown-ccv · hetd54 · Dec 19, 2024 · Aug 2, 2024 · Aug 2, 2024 · Aug 2, 2024
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -1,3 +1,9 @@
+import { Opportunities } from "@/components/Opportunities"
+
 export default function About() {
-  return <div>About</div>
+  return (
+    <div>
+      <Opportunities />
+    </div>
+  )
 }
diff --git a/app/api/about/route.ts b/app/api/about/route.ts
@@ -0,0 +1,27 @@
+export async function POST() {
+  const myHeaders = new Headers()
+  myHeaders.append("Content-Type", "application/json")
+  myHeaders.append(
+    "Cookie",
+    "PLAY_SESSION=9365d69619d226b22f74256e51894a0476197a1f-instance=vps-prod-tvvtdnej.prod-vps.pr501.cust.pdx.wd; __cf_bm=zYtKNPBpg6veqmLc2qdk_TeHEGdGWIcSRG9tdtkQNbQ-1721323439-1.0.1.1-TApbCV1fQKTtEauZKvZ5XnXrZQJL7dcML6ixA3AycoiBMROa.iAzMq_K.5E7iaZfCj9.WhQQlmYfAxW8wdwZgQ; __cflb=02DiuHJZe28xXz6hQKLf1exjNbMDM5uxekNnt7kFV7LUC; _cfuvid=hqIGrDcFihah5EiFO0c_HEM4gIPwkeWCOxjMxNqjR20-1721323439159-0.0.1.1-604800000; wd-browser-id=fc0f0b1d-4547-488d-b353-99c751c61dae; wday_vps_cookie=1122671626.53810.0000"
+  )
+
+  const raw = JSON.stringify({
+    limit: 20,
+    offset: 0,
+    appliedFacets: {},
+    searchText: "180 George Street",
+  })
+
+  const response = await fetch(
+    "https://brown.wd5.myworkdayjobs.com/wday/cxs/brown/staff-careers-brown/jobs",
+    {
+      method: "POST",
+      headers: myHeaders,
+      body: raw,
+    }
+  )
+  const json = await response.json()
+
+  return Response.json({ json })
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -21,7 +21,9 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <Navbar />
-        <main>{children}</main>
+        <main className="bg-white flex min-h-screen flex-col p-0 lg:p-24">
+          {children}
+        </main>
         <Footer />
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -2,8 +2,8 @@ import EventSection from "@/components/EventSection"
 
 export default function Home() {
   return (
-    <main className="bg-white flex min-h-screen flex-col items-center justify-between p-0 lg:p-24">
+    <div>
       <EventSection />
-    </main>
+    </div>
   )
 }
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
@@ -0,0 +1,19 @@
+import React from "react"
+
+type CardProps = {
+  className?: string
+}
+
+export function LinkCard({
+  className = "",
+  children,
+}: React.PropsWithChildren<CardProps>) {
+  return (
+    <section
+      className={`"h-full p-6 flex flex-col gap-2 rounded-lg drop-shadow-md hover:drop-shadow-lg transition duration-500" ${className ? className : "bg-gray-50 border-white border-2"}`}
+      /* https://design-system.w3.org/components/cards.html#block-link-cards */ data-component="card"
+    >
+      {children}
+    </section>
+  )
+}
diff --git a/components/Opportunities.tsx b/components/Opportunities.tsx
@@ -0,0 +1,106 @@
+"use client"
+import React, { useState, useEffect } from "react"
+import Link from "next/link"
+import { LinkCard } from "@/components/LinkCard"
+import {
+  MapPinIcon,
+  ArrowRightIcon,
+  UserPlusIcon,
+} from "@heroicons/react/24/solid"
+
+interface OpportunityProps {
+  total: number
+  jobPostings: PositionProps[]
+  facets: Object[]
+  userAuthenticated: boolean
+}
+
+interface PositionProps {
+  title: string
+  externalPath: string
+  locationsText: string
+  postedOn: string
+  bulletFields: string[]
+}
+
+export const Opportunities: React.FC = () => {
+  const initialData = {
+    total: 0,
+    jobPostings: [],
+    userAuthenticated: false,
+    facets: [],
+  }
+  const [data, setData] = useState<OpportunityProps>(initialData)
+  const [isLoading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  const handleApiCall = async () => {
+    try {
+      const res = await fetch("/api/about", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+
+      if (!res.ok) {
+        throw new Error(`Failed to fetch: ${res.status}`)
+      }
+
+      const opportunities = await res.json()
+      setData(opportunities.json)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+  useEffect(() => {
+    handleApiCall()
+  }, [])
+
+  return (
+    <section>
+      <Link href="#opportunities" className="text-neutral-900">
+        <h2 className="text-3xl bg-primary-500 text-white p-4 flex items-center gap-2">
+          <UserPlusIcon className="h-7 w-7" />
+          Opportunities
+        </h2>
+      </Link>
+      {isLoading && <p className="px-2 font-bold">Loading...</p>}
+      {error && <p className="px-2 font-bold text-red">Error: {error}</p>}
+      {data.jobPostings.length > 0 &&
+        data.jobPostings.map((position) => {
+          return (
+            <div
+              key={position.externalPath}
+              className="flex flex-col m-4 gap-6"
+            >
+              <a
+                key={position.externalPath}
+                className="position-block text-secondary-blue-700 hover:text-black"
+                href={`https://brown.wd5.myworkdayjobs.com/en-US/staff-careers-brown${position.externalPath}`}
+              >
+                <LinkCard>
+                  <div className="flex flex-col gap-6 md:items-center md:justify-between md:flex-row">
+                    <div className="flex flex-col gap-2">
+                      <p className="flex items-center text-secondary-blue-700 gap-2 md:gap-4">
+                        <MapPinIcon className="h-4 w-4" /> Providence, RI -
+                        United States
+                      </p>
+                      <p className="text-gray-800">{position.title}</p>
+                    </div>
+
+                    <div className="flex items-center gap-2 md:gap-6">
+                      <p>Learn More</p>
+                      <ArrowRightIcon className="h-4 w-4" />
+                    </div>
+                  </div>
+                </LinkCard>
+              </a>
+            </div>
+          )
+        })}
+    </section>
+  )
+}