add detailed exhibitor view to sidebar

package.json

@@ -21,6 +21,7 @@
 		"@radix-ui/react-separator": "^1.0.3",
 		"@radix-ui/react-slot": "^1.0.2",
 		"@t3-oss/env-nextjs": "^0.9.2",
+		"@tailwindcss/container-queries": "^0.1.1",
 		"@tanstack/react-query": "^5.20.1",
 		"@turf/center-of-mass": "^7.0.0",
 		"@types/geojson": "^7946.0.14",

src/app/student/exhibitors/_components/ExhibitorDetails.tsx → src/app/student/_components/ExhibitorDetails.tsx

@@ -17,19 +17,19 @@ export default function ExhibitorDetails({
 	const hasIndustries = exhibitor.industries?.length > 0
 	const hasEmployments = exhibitor.employments?.length > 0
 	return (
-		<div className="p-5 sm:p-10">
-			<div className="flex flex-col items-center gap-6 sm:h-[100px] sm:flex-row">
+		<div className="@container">
+			<div className="flex flex-col-reverse items-center gap-6 @sm:h-[100px] @sm:flex-row">
 				{(exhibitor.logo_squared || exhibitor.logo_freesize) && (
 					<Image
-						className="h-20 w-auto object-contain sm:h-full sm:min-w-28 sm:max-w-[25%]"
+						className="h-20 w-auto object-contain @sm:h-full @sm:min-w-28 @sm:max-w-[25%]"
 						src={exhibitor.logo_squared ?? exhibitor.logo_freesize ?? ""}
 						alt={exhibitor.name}
 						width={300}
 						height={300}
 					/>
 				)}
-				<div className="flex flex-col items-center sm:ml-2 sm:block">
-					<Page.Header className="text-center sm:text-start">
+				<div className="flex flex-col items-center @sm:ml-2 @sm:block">
+					<Page.Header className="text-center @sm:text-start">
 						{exhibitor.name}
 					</Page.Header>
 					{exhibitor.company_website && (

src/app/student/exhibitors/[exhibitor]/page.tsx

@@ -1,13 +1,11 @@
-import ExhibitorDetails from "@/app/student/exhibitors/_components/ExhibitorDetails"
+import ExhibitorDetails from "@/app/student/_components/ExhibitorDetails"
 import { Page } from "@/components/shared/Page"
 import {
 	fetchAllYearExhibitors,
 	fetchExhibitors
 } from "@/components/shared/hooks/api/useExhibitors"
-import { Badge } from "@/components/ui/badge"
 import { DateTime } from "luxon"
 import { Metadata } from "next"
-import Image from "next/image"
 import { notFound } from "next/navigation"
 
 interface RouteProps {

src/app/student/exhibitors/_components/ExhibitorCard.tsx

@@ -1,15 +1,15 @@
 "use client"
 
-import ExhibitorDetails from "@/app/student/exhibitors/_components/ExhibitorDetails"
+import ExhibitorDetails from "@/app/student/_components/ExhibitorDetails"
+import BadgeCollection from "@/app/student/exhibitors/_components/BadgeCollection"
 import { Exhibitor } from "@/components/shared/hooks/api/useExhibitors"
 import Modal from "@/components/ui/Modal"
-import BadgeCollection from "@/app/student/exhibitors/_components/BadgeCollection"
 
+import { useScreenSize } from "@/components/shared/hooks/useScreenSize"
 import Image from "next/image"
 import Link from "next/link"
-import { useSearchParams, useRouter } from "next/navigation"
-import { useState, useEffect } from "react"
-import { useScreenSize } from "@/components/shared/hooks/useScreenSize"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
 
 // TODO:
 // - text is janky on scale transition for the cards
@@ -37,7 +37,9 @@ export function ExhibitorCard({ exhibitor }: { exhibitor: Exhibitor }) {
 					router.push("/student/exhibitors", { scroll: false })
 				}}
 				className="max-w-[1000px] bg-gradient-to-br from-emerald-950 via-stone-900 to-stone-900 p-0">
-				<ExhibitorDetails exhibitor={exhibitor} />
+				<div className="sm:p-10 p-4">
+					<ExhibitorDetails exhibitor={exhibitor} />
+				</div>
 			</Modal>
 
 			<Link href={`/student/exhibitors?id=${exhibitor.id}`} scroll={false}>

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

@@ -11,10 +11,11 @@ function BoothMarker({ booth, scale }: { booth: Booth; scale: number }) {
 			key={booth.id}
 			longitude={booth.center[0]}
 			latitude={booth.center[1]}>
-			<div className="size-[50px]" style={{ transform: `scale(${scale})` }}>
+			<div style={{ transform: `scale(${scale})` }}>
 				{logoSrc ? (
-					<div>
+					<div className="size-[60px] flex" >
 						<Image
+							className="my-auto"
 							src={logoSrc}
 							alt={booth.exhibitor.name}
 							width={300}

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

@@ -11,62 +11,63 @@ import {
 	SelectValue
 } from "@/components/ui/select"
 import { useState } from "react"
-import { BoothMap } from "../lib/booths"
+import { BoothID, BoothMap } from "../lib/booths"
 import { LocationId, locations } from "../lib/locations"
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
 
 export default function MainView({
 	boothsByLocation,
-	exhibitors
+	boothsById
 }: {
 	boothsByLocation: Map<LocationId, BoothMap>
-	exhibitors: Exhibitor[]
+	boothsById: BoothMap
 }) {
 	const [locationId, setLocationId] = useState<LocationId>("nymble/1")
 	const location = locations.find(loc => loc.id === locationId)!
 	const currentLocationBoothsById = boothsByLocation.get(locationId)!
 
+	const [activeBoothId, setActiveBoothId] = useState<BoothID | null>(null)
+	const [hoveredBoothId, setHoveredBoothId] = useState<BoothID | null>(null)
+
 	return (
 		<div className="relative flex h-full w-full">
-			<Sidebar exhibitors={exhibitors} />
+			<Sidebar boothsById={boothsById} activeBoothId={activeBoothId} />
 
-			<div className="flex-grow" >
+			<div className="flex-grow">
 				<MapComponent
-					// key={locationId}
 					boothsById={currentLocationBoothsById}
 					location={location}
+					activeBoothId={activeBoothId}
+					hoveredBoothId={hoveredBoothId}
+					setActiveBoothId={setActiveBoothId}
+					setHoveredBoothId={setHoveredBoothId}
 				/>
 			</div>
 
-			<SelectLocation locationId={locationId} setLocationId={setLocationId} />
+			<SelectLocation />
 		</div>
 	)
-}
 
-function SelectLocation({
-	locationId,
-	setLocationId
-}: {
-	locationId: LocationId
-	setLocationId: (id: LocationId) => void
-}) {
-	return (
-		<div className="absolute top-2 justify-self-center rounded-full sm:right-2">
-			<Select
-				value={locationId}
-				onValueChange={(id: LocationId) => setLocationId(id)}>
-				<SelectTrigger className="w-[180px] rounded-full py-5 dark:ring-offset-0 dark:focus:ring-0">
-					<SelectValue placeholder="Location" />
-				</SelectTrigger>
-				<SelectContent>
-					{locations.map(loc => (
-						<SelectItem key={loc.id} value={loc.id}>
-							{loc.label}
-						</SelectItem>
-					))}
-				</SelectContent>
-			</Select>
-		</div>
-	)
+	function SelectLocation() {
+		return (
+			<div className="absolute top-2 justify-self-center rounded-full sm:right-2">
+				<Select
+					value={locationId}
+					onValueChange={(id: LocationId) => {
+						setLocationId(id)
+						setActiveBoothId(null)
+					}}>
+					<SelectTrigger className="w-[180px] rounded-full py-5 dark:ring-offset-0 dark:focus:ring-0">
+						<SelectValue placeholder="Location" />
+					</SelectTrigger>
+					<SelectContent>
+						{locations.map(loc => (
+							<SelectItem key={loc.id} value={loc.id}>
+								{loc.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
+		)
+	}
 }

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

@@ -49,16 +49,22 @@ const backgroundLayerStyle: BackgroundLayer = {
 
 export function MapComponent({
 	boothsById,
-	location
+	location,
+	activeBoothId,
+	setActiveBoothId,
+	hoveredBoothId,
+	setHoveredBoothId
 }: {
 	boothsById: BoothMap
 	location: Location
+	activeBoothId: BoothID | null
+	hoveredBoothId: BoothID | null
+	setActiveBoothId: (id: BoothID | null) => void
+	setHoveredBoothId: (id: BoothID | null) => void
 }) {
 	const mapRef = useRef<MapRef>(null)
 
 	const [markerScale, setMarkerScale] = useState(1)
-	const [activeBoothId, setActiveBoothId] = useState<BoothID | null>(null)
-	const [hoveredBoothId, setHoveredBoothId] = useState<BoothID | null>(null)
 
 	// Fly to location center on change
 	useEffect(() => {

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

@@ -8,28 +8,53 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 import { useState, useRef } from "react"
 import { Button } from "@/components/ui/button"
 import { ChevronsLeft, ChevronsRight } from "lucide-react"
+import { BoothID, BoothMap } from "@/app/student/map/lib/booths"
+import ExhibitorDetails from "@/app/student/_components/ExhibitorDetails"
 
-export default function Sidebar({ exhibitors }: { exhibitors: Exhibitor[] }) {
+export default function Sidebar({
+	boothsById,
+	activeBoothId
+}: {
+	boothsById: BoothMap
+	activeBoothId: BoothID | null
+}) {
 	const { width } = useScreenSize()
-	const isMobile = width ? width <= 640 : false
+	const smallScreen = width ? width <= 800 : false
+
+	if (activeBoothId != null) {
+		const exhibitor = boothsById.get(activeBoothId)?.exhibitor
+		if (!exhibitor) {
+			console.error(`No exhibitor found for booth with id ${activeBoothId}`)
+			return null
+		}
+		return (
+			<SidebarContainer smallScreen={smallScreen}>
+				<div className="p-2">
+					<ExhibitorDetails exhibitor={exhibitor} />
+				</div>
+			</SidebarContainer>
+		)
+	}
 
 	return (
-		<SidebarContainer isMobile={isMobile}>
+		<SidebarContainer smallScreen={smallScreen}>
 			<div className="h-[72px] text-2xl">Filters and stuff</div>
 			<ul className="p-2">
-				{exhibitors.map(exhibitor => (
-					<li key={exhibitor.id}>{exhibitor.name}</li>
+				{Array.from(boothsById.values()).map(({ id, exhibitor }) => (
+					<li key={id} className="py-1">
+						{exhibitor.name}
+					</li>
 				))}
 			</ul>
 		</SidebarContainer>
 	)
 }
 
 function SidebarContainer({
-	isMobile,
+	smallScreen: isMobile,
 	children
 }: {
-	isMobile: boolean
+	smallScreen: boolean
 	children: React.ReactNode
 }) {
 	const [open, setOpen] = useState<boolean>(true)
@@ -38,12 +63,13 @@ function SidebarContainer({
 	if (isMobile) {
 		return (
 			<Drawer
+				dismissible={false}
 				noBodyStyles={true}
 				modal={false}
 				setBackgroundColorOnScale={false}
 				shouldScaleBackground={false}
 				open={open}
-				snapPoints={["100px", 0.8]}
+				snapPoints={["120px", 0.8]}
 				onOpenChange={setOpen}
 				direction={"bottom"}>
 				<DrawerContent
@@ -60,7 +86,7 @@ function SidebarContainer({
 	}
 
 	return (
-		<div className={cn("relative h-full", open ? "w-[400px]" : "w-0")}>
+		<div className={cn("relative h-full", open ? "w-[500px]" : "w-0")}>
 			<ScrollArea className="h-full">
 				{children}
 				<ScrollBar></ScrollBar>

src/app/student/map/data/booths.json

@@ -5,7 +5,8 @@
 			"type": "Feature",
 			"properties": {
 				"id": 2,
-				"location": "nymble/1"
+				"location": "nymble/1",
+				"exhibitorId": 1480
 			},
 			"geometry": {
 				"coordinates": [
@@ -25,7 +26,8 @@
 			"type": "Feature",
 			"properties": {
 				"id": 3,
-				"location": "nymble/2"
+				"location": "nymble/2",
+				"exhibitorId": 1481
 			},
 			"geometry": {
 				"coordinates": [
@@ -47,7 +49,8 @@
 			"type": "Feature",
 			"properties": {
 				"id": 0,
-				"location": "nymble/1"
+				"location": "nymble/1",
+				"exhibitorId": 1519
 			},
 			"geometry": {
 				"coordinates": [
@@ -68,7 +71,8 @@
 			"type": "Feature",
 			"properties": {
 				"id": 1,
-				"location": "nymble/1"
+				"location": "nymble/1",
+				"exhibitorId": 1530
 			},
 			"geometry": {
 				"coordinates": [
@@ -91,7 +95,8 @@
 			"type": "Feature",
 			"properties": {
 				"id": 4,
-				"location": "library"
+				"location": "library",
+				"exhibitorId": 1531
 			},
 			"geometry": {
 				"coordinates": [

src/app/student/map/lib/booths.ts

@@ -5,7 +5,7 @@ import boothDataRaw from "../data/booths.json"
 
 export type BoothID = number
 
-export type GeoJsonBoothProperties = { id: BoothID; location: LocationId }
+export type GeoJsonBoothProperties = { id: BoothID; location: LocationId, exhibitorId: number }
 
 export type GeoJsonBooth = Feature<Polygon, GeoJsonBoothProperties>