Merge branch 'main' into erik/add-at-fair-page

next.config.mjs

@@ -21,6 +21,11 @@ const nextConfig = {
   },
   redirects: async () => {
     return [
+      {
+        source: "/map",
+        destination: "/student/map",
+        permanent: true
+      },
       {
         source: "/recruitment",
         destination: "/student/recruitment",

src/app/page.tsx

@@ -1,17 +1,39 @@
 import { CompanyRegistrationButton } from "@/app/_components/CompanyRegistrationButton"
 import { FairDates } from "@/app/_components/FairDates"
 import { RecruitmentBanner } from "@/app/_components/Recruitment"
+import { fetchDates } from "@/components/shared/hooks/api/useDates"
+import { fetchExhibitors } from "@/components/shared/hooks/api/useExhibitors"
 import { NavigationMenu } from "@/components/shared/NavigationMenu"
 import { Page } from "@/components/shared/Page"
 import { Button } from "@/components/ui/button"
 import { ArrowRightIcon } from "lucide-react"
+import Image from "next/image"
 import Link from "next/link"
 import { Suspense } from "react"
 
 export default async function HomePage() {
+  const exhibitors = await fetchExhibitors()
+  const dates = await fetchDates()
+  const fr_end = new Date(dates.fr.end).getTime()
+  const fair_start = new Date(dates.fair.days[0]).getTime()
+  const fair_end = new Date(dates.fair.days[1]).getTime()
+  const today = Date.now()
+
+  const goldExhibitorOne = exhibitors.find(
+    exhibitor => exhibitor.name === "Försvarsmakten"
+  )
+  const goldExhibitorTwo = exhibitors.find(
+    exhibitor => exhibitor.name === "Nordea"
+  )
+
   return (
     <>
-      <NavigationMenu aside={<CompanyRegistrationButton />} />
+      {today < fr_end ? (
+        <NavigationMenu />
+      ) : (
+        <NavigationMenu aside={<CompanyRegistrationButton />} />
+      )}
+
       <Page.Background className="">
         <div className="mb-5 flex w-full flex-1 justify-center ">
           <div className="mx-5 w-full max-w-[800px] pt-3 md:mx-10 md:pt-6">
@@ -20,7 +42,7 @@ export default async function HomePage() {
             </Suspense>
           </div>
         </div>
-        <div className="flex w-full flex-1 flex-col gap-y-10 pb-32 md:flex-row">
+        <div className="flex w-full flex-1 flex-col gap-y-40 pb-32 md:flex-row">
           <div className="flex flex-1">
             <div className="mx-auto flex max-w-[500px] flex-1">
               <div className="z-10 mx-10 flex flex-col md:flex-1">
@@ -33,27 +55,77 @@ export default async function HomePage() {
                   opportunities and shape their future
                 </h2>
                 <div className="mt-4 flex flex-wrap gap-2">
-                  <CompanyRegistrationButton />
-
-                  <Link href="/exhibitor/packages">
-                    <Button
-                      variant={"secondary"}
-                      className="dark:bg-liqorice-700">
-                      This Year&apos;s Packages
-                      <ArrowRightIcon className="ml-2 h-4 w-4" />
-                    </Button>
-                  </Link>
+                  {today < fr_end ? (
+                    <>
+                      <CompanyRegistrationButton />
+                      <Link href="/exhibitor/packages">
+                        <Button
+                          variant={"secondary"}
+                          className="dark:bg-liqorice-700">
+                          This Year&apos;s Packages
+                          <ArrowRightIcon className="ml-2 h-4 w-4" />
+                        </Button>
+                      </Link>
+                    </>
+                  ) : (
+                    <>
+                      <Link href="/student/events">
+                        <Button>Signup for events</Button>
+                      </Link>
+                      {fair_start < today && today < fair_end && (
+                        <Link href="/students/map">
+                          <Button
+                            variant={"secondary"}
+                            className="dark:bg-liqorice-700">
+                            Go to map
+                            <ArrowRightIcon className="ml-2 h-4 w-4" />
+                          </Button>
+                        </Link>
+                      )}
+                    </>
+                  )}
                 </div>
                 <Suspense>
                   <FairDates />
                 </Suspense>
               </div>
             </div>
           </div>
-          <div className="z-10 flex justify-center gap-4 md:flex-[1]">
-            {/* 					<div className="flex max-h-52 max-w-96 flex-col items-center justify-center gap-y-5 rounded-lg border-[1px] border-slate-200 bg-white bg-opacity-40 p-8">
+          <div className="z-10 flex flex-col items-center md:flex-[1]">
+            {/*<div className="flex max-h-52 max-w-96 flex-col items-center justify-center gap-y-5 rounded-lg border-[1px] border-slate-200 bg-white bg-opacity-40 p-8">
 						<Countdown />
-					</div> */}
+					  </div> */}
+            <h1 className="max-w-30 flex justify-center font-bebas-neue text-3xl text-stone-300">
+              Our Gold Exhibitors
+            </h1>
+            <div className="mt-4 flex w-full flex-wrap justify-center gap-6">
+              <div className="flex items-center justify-center gap-20">
+                {goldExhibitorOne && (
+                  <Link href={`/student/exhibitors?id=${goldExhibitorOne.id}`}>
+                    <Image
+                      className="object-contain"
+                      src={goldExhibitorOne.logo_squared ?? ""}
+                      alt={goldExhibitorOne.name}
+                      width={200}
+                      height={400}
+                    />
+                  </Link>
+                )}
+                {goldExhibitorTwo && (
+                  <Link href={`/student/exhibitors?id=${goldExhibitorTwo.id}`}>
+                    <div className="rounded-lg bg-white/90">
+                      <Image
+                        className="object-contain"
+                        src={"/exhibitorLogo/NordeaBankLogo.png"}
+                        alt={goldExhibitorTwo.name}
+                        width={200}
+                        height={400}
+                      />
+                    </div>
+                  </Link>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </Page.Background>

src/app/student/events/_components/EventDetails.tsx

@@ -4,7 +4,7 @@ import { Event } from "@/components/shared/hooks/api/useEvents"
 import { Button } from "@/components/ui/button"
 import { cn, formatTimestampAsDate, formatTimestampAsTime } from "@/lib/utils"
 
-import { Calendar, Clock, Coins, MapPin, Utensils } from "lucide-react"
+import { Calendar, Clock, Coins, MapPin, User, Utensils } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { ReactNode } from "react"
@@ -20,7 +20,7 @@ function InfoBoxItem({
 }) {
   if (value == null) return
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-8">
       <div className="flex gap-2 text-stone-200">
         <span className="mt-1 w-5">{icon}</span>
         <span className="w-20 flex-none font-bold ">{label}:</span>
@@ -70,10 +70,16 @@ export default function EventDetails({
             value={`${formatTimestampAsTime(event.event_start)} - ${formatTimestampAsTime(event.event_end)}`}
             icon={<Clock size={16} />}></InfoBoxItem>
           {/* Separator */}
-          {(event.food || event.fee) && (
+          {(event.food || event.fee || event.event_max_capacity) && (
             <div className="h-[1px] w-full bg-stone-400"></div>
           )}
           {/* Bottom row */}
+          {event.event_max_capacity && (
+            <InfoBoxItem
+              label="Registered"
+              value={`${event.participant_count} / ${event.event_max_capacity}`}
+              icon={<User size={16} />}></InfoBoxItem>
+          )}
           <InfoBoxItem
             label="Food"
             value={event.food}
@@ -92,15 +98,19 @@ export default function EventDetails({
           {event.open_for_signup_student &&
           today < (event.registration_end ?? event.event_start) ? (
             <Link href={event.signup_link ?? ""}>
-              <Button className="w-full">Sign Up</Button>
+              <Button className="w-full">
+                {event.participant_count < event.event_max_capacity
+                  ? "Signup"
+                  : "Join waiting List"}
+              </Button>
             </Link>
           ) : (
             <Button disabled>
               {today < (event.registration_end ?? event.event_start) ? (
                 <> Signup opening soon ! </>
               ) : (
                 <>
-                  Registration closed
+                  Registration closed{" "}
                   {event.registration_end
                     ? formatTimestampAsDate(event.registration_end)
                     : ""}

src/app/student/map/_components/BoothMarker.tsx

@@ -22,7 +22,9 @@ export function BoothMarker({ booth, scale }: { booth: Booth; scale: number }) {
               height={300}></Image>
           </div>
         ) : (
-          <span className="text-black">{booth.exhibitor.name}</span>
+          <div className="max-w-[100px] truncate text-neutral-200">
+            {booth.exhibitor.name}
+          </div>
         )}
       </div>
     </Marker>

src/app/student/map/_components/FilterSection.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { Filter, FilterItem } from "@/app/student/lib/filters"
+import { FilterSelectionItem } from "@/app/student/map/_components/FilterSelectionItem"
+import { useState } from "react"
+
+export default function FilterSection({
+  filter,
+  onChange
+}: {
+  filter: Filter
+  onChange: (selected: FilterItem[]) => void
+}) {
+  const { items, selected, label } = filter
+
+  const maxDisplayed = 7
+  const [numDisplayed, setNumDisplayed] = useState(maxDisplayed)
+
+  function isSelected(item: FilterItem) {
+    return selected.some(s => s.id === item.id)
+  }
+
+  function onSelectionChange(item: FilterItem) {
+    if (isSelected(item)) {
+      onChange(selected.filter(s => s.id !== item.id)) // remove item
+    } else {
+      onChange([...selected, item]) // add item
+    }
+  }
+
+  return (
+    <div className="flex flex-col justify-between">
+      <div>
+        <h2 className="m-2 text-left text-xl text-stone-200">{label}</h2>
+        <div className="m-1 mt-3 flex flex-wrap gap-4">
+          {items.slice(0, numDisplayed).map(item => (
+            <div className="" key={item.id}>
+              <FilterSelectionItem
+                name={item.name}
+                isSelected={filter.selected.includes(item)}
+                onClick={() => onSelectionChange(item)}
+              />
+            </div>
+          ))}
+          {maxDisplayed < items.length && (
+            <button
+              onClick={() =>
+                setNumDisplayed(
+                  numDisplayed < items.length ? items.length : maxDisplayed
+                )
+              }
+              className="flex w-auto rounded-3xl border border-neutral-400 px-3 py-2 text-center text-xs text-neutral-400 xs:px-4 xs:py-2 xs:text-base">
+              {numDisplayed < items.length ? (
+                <span>Show all {items.length}</span>
+              ) : (
+                <span>Show less</span>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/student/map/_components/FilterSelectionItem.tsx

@@ -0,0 +1,21 @@
+export function FilterSelectionItem({
+  name,
+  isSelected,
+  onClick
+}: {
+  name: string
+  isSelected: boolean
+  onClick: () => void
+}) {
+  return (
+    <div
+      className={`flex w-auto cursor-pointer text-ellipsis whitespace-nowrap rounded-3xl border px-3 py-2 text-center transition xs:px-4 xs:py-2  ${
+        isSelected
+          ? "border-1 border-melon-700 text-melon-700 shadow-md shadow-melon-700/30"
+          : "border-emerald-700 text-emerald-700"
+      }`}
+      onClick={onClick}>
+      <span className="text-xs xs:text-base">{name}</span>
+    </div>
+  )
+}