fix: Add locate on map from info

Co-authored-by: Didrik Munther <[email protected]> Co-authored-by: August Paulsrud <[email protected]>
armada-ths · Nov 17, 2024 · d0ea033 · d0ea033
1 parent 1dc07d4
commit d0ea033
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/src/app/student/map/_components/BoothListItem.tsx b/src/app/student/map/_components/BoothListItem.tsx
@@ -1,8 +1,7 @@
 "use client"
-import { LocationId } from "@/app/student/map/lib/locations"
+import { LocationId, locations } from "@/app/student/map/lib/locations"
 import { Card } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
-import { MapIcon } from "lucide-react"
 import Image from "next/image"
 import { Booth, BoothID } from "../lib/booths"
 
@@ -12,7 +11,8 @@ export function BoothListItem({
   onBoothNavigate,
   onMouseEnter,
   onMouseLeave,
-  closeDrawer
+  closeDrawer,
+  currentLocationId
 }: {
   booth: Booth
   onBoothClick: (boothId: BoothID) => void
@@ -44,7 +44,7 @@ export function BoothListItem({
         {}
       )}
       onClick={() => onBoothClick(booth.id)}>
-      <div className="h-12 transition hover:bg-lime-950">
+      <div className="transition hover:bg-white/10">
         <div className="ml-4 flex h-full items-center">
           {logoSrc ? (
             <Image
@@ -56,27 +56,19 @@ export function BoothListItem({
           ) : (
             <div className="mr-2 size-16"></div>
           )}
-          <div>{booth.exhibitor.name}</div>
-          {/*           <div
-            className={cn(
-              "ml-auto mr-2 text-xs text-stone-400",
-              booth.location === currentLocationId && "font-extrabold"
-            )}>
-            {locations.find(loc => loc.id === booth.location)?.label}
-          </div> */}
+          <div className="py-2">
+            <p className="overflow-ellipsis">{booth.exhibitor.name}</p>
+            <div className={cn("ml-auto mr-2 text-xs text-stone-400/50")}>
+              {locations.find(loc => loc.id === booth.location)?.label}
+            </div>
+          </div>
           <div
             className="ml-auto "
             onClick={event => {
               event.stopPropagation()
               event.preventDefault()
               closeDrawer()
-            }}>
-            <div
-              className="flex size-16 items-center justify-center px-1"
-              onClick={onBoothMapNavigate}>
-              <MapIcon size={18} />
-            </div>
-          </div>
+            }}></div>
         </div>
       </div>
     </Card>

diff --git a/src/app/student/map/_components/Sidebar.tsx b/src/app/student/map/_components/Sidebar.tsx
@@ -38,6 +38,7 @@ import {
   EraserIcon,
   FilterIcon,
   MapIcon,
+  MapPinIcon,
   SearchIcon,
   X,
   XIcon
@@ -114,11 +115,35 @@ export default function Sidebar({
       return null
     }
     return (
-      <SidebarContainer open={open} setOpen={setOpen} smallScreen={smallScreen}>
+      <SidebarContainer
+        open={open}
+        setOpen={setOpen}
+        smallScreen={smallScreen}
+        header={
+          <div className="flex items-center justify-between">
+            <Button
+              variant="ghost"
+              onClick={() => setActiveDrawerBoothId(null)}>
+              <ArrowLeft size={30} />
+            </Button>
+
+            <div className="flex justify-end py-2">
+              <Button
+                className="flex gap-2"
+                variant={"outline"}
+                onClick={() => {
+                  setActiveBoothId(null)
+                  setTimeout(() => {
+                    setActiveBoothId(activeDrawerBoothId)
+                  })
+                  setOpen(false)
+                }}>
+                <MapPinIcon size={15} /> Locate on map
+              </Button>
+            </div>
+          </div>
+        }>
         <div className="p-2">
-          <Button variant="ghost" onClick={() => setActiveDrawerBoothId(null)}>
-            <ArrowLeft size={30} />
-          </Button>
           <ExhibitorDetails exhibitor={exhibitor} />
         </div>
       </SidebarContainer>