added directions

package.json

@@ -23,6 +23,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@tabler/icons-react": "^2.41.0",
     "@types/mapbox-gl": "^2.7.18",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

src/app/explore/page.tsx

@@ -11,10 +11,10 @@ export default function Home() {
 
   return (
     <main className="flex flex-row h-[calc(100vh-64px)]">
-      <div className={`${open ? 'w-1/4 2xl:w-1/6' : 'w-14'} transition-height duration-300 ease-in-out`}>
+      <div className={`${open ? 'w-1/4 2xl:w-1/6' : 'w-14'} transition-size duration-300 ease-in-out`}>
         <CatchFeed open={open} setOpen={setOpen}/>
       </div>
-      <div ref={mapContainerRef} className={`${open ? 'w-3/4 2xl:w-5/6' : 'w-full'} transition-height duration-300 ease-in-out relative bg-slate-50 dark:bg-slate-950`}>
+      <div ref={mapContainerRef} className={`${open ? 'w-3/4 2xl:w-5/6' : 'w-full'} transition-size duration-300 ease-in-out relative bg-slate-50 dark:bg-slate-950`}>
         <MapContainer mapContainerRef={mapContainerRef}/>
       </div>
     </main>

src/components/api/geojson-directions.ts

@@ -3,7 +3,7 @@ import { Coordinates, DirectionsResponse } from "../context/MapContext.types";
 const buildQuery = (profile: string, start: Coordinates, destination: Coordinates) => {
   const base_url = "https://api.mapbox.com/directions/v5/"
   const directions_url = `${base_url}${profile}/${start.lng},${start.lat};${destination.lng},${destination.lat}`
-  const query_url = `${directions_url}?geometries=geojson&access_token=${process.env.NEXT_PUBLIC_MAPBOX_API_KEY}`
+  const query_url = `${directions_url}?geometries=geojson&steps=true&banner_instructions=true&access_token=${process.env.NEXT_PUBLIC_MAPBOX_API_KEY}`
   return query_url
 };
 

src/components/context/MapContext.types.ts

@@ -57,7 +57,7 @@ export interface DirectionsResponse {
       }[];
       weight: number;
       duration: number;
-      steps: never[];
+      steps: any[];
       distance: number;
       summary: string;
     }[];

src/components/explore/DirectionsCard.tsx

@@ -5,9 +5,72 @@ import { Button } from "../ui/button";
 import { X, ChevronDown } from "lucide-react";
 import { Separator } from "@/components/ui/separator"
 import { FaRoute } from "react-icons/fa";
+import { useState } from "react";
+import { ScrollArea } from "../ui/scroll-area";
+import { v4 as uuidv4 } from 'uuid';
+import { IconCornerUpLeft, IconCornerUpRight, IconMapPinCheck, IconArrowRampLeft, IconArrowRampRight, IconArrowBearLeft, IconArrowBearRight, IconNavigation, IconArrowBackUp, IconArrowBearRight2, IconArrowBearLeft2 } from '@tabler/icons-react';
 
 export default function DirectionsCard() {
   const { directionsData, setDirectionsData } = useMapContext()
+  const [openSteps, setOpenSteps] = useState<boolean>(false)
+
+  const getModifierSymbol = (modifier: string, type: string) => {
+    if (type === "arrive") {
+      return <IconMapPinCheck className="w-5 h-5" />
+    } else if (modifier === "left") {
+      if (type === "turn") {
+        return <IconCornerUpLeft />
+      } else if (type === "off ramp") {
+        return <IconArrowRampLeft />
+      } else if (type === "fork") {
+        return <IconArrowBearLeft2 />
+      }
+    } else if (modifier === "right") {
+      if (type === "turn") {
+        return <IconCornerUpRight />
+      } else if (type === "off ramp") {
+        return <IconArrowRampRight />
+      } else if (type === "fork") {
+        return <IconArrowBearRight2 />
+      }
+    } else if (modifier === "slight left") {
+      if (type === "turn") {
+        return <IconArrowBearLeft />
+      }
+    } else if (modifier === "slight right") {
+      if (type === "turn") {
+        return <IconArrowBearRight />
+      }
+    } else if (modifier === "uturn") {
+      if (type === "turn") {
+        return <IconArrowBackUp className="-rotate-90" />
+      }
+    }
+    return <IconNavigation className="w-5 h-5" />
+  }
+
+  const getDirections = () =>
+    directionsData?.routes[0].legs[0].steps.map((result, index, array) => {
+      return (
+        <div key={uuidv4()}>
+          <div className="flex flex-row p-2 items-center justify-between">
+            <span className="flex flex-row space-x-2">
+              {getModifierSymbol(array[index - 1]?.bannerInstructions[0]?.primary.modifier, array[index - 1]?.bannerInstructions[0]?.primary.type)}
+              <p className="text-sm">{result.maneuver.instruction}</p>
+            </span>
+            {array[index - 1] !== undefined &&
+              <span>
+                {metersToMiles(array[index - 1]?.distance) === 0 ?
+                  <p className="text-sm ml-4">{metersToFeet(array[index - 1]?.distance) + " ft"}</p> :
+                  <p className="text-sm ml-4">{metersToMiles(array[index - 1]?.distance) + " mi"}</p>}
+              </span>}
+          </div>
+          <Separator />
+        </div>
+      )
+    })
+
+
   return (
     <>
       {directionsData && <div className="absolute top-0 right-0 p-5 z-10">
@@ -31,15 +94,18 @@ export default function DirectionsCard() {
               <p className="text-sm">min</p>
             </div>
             <div className="flex flex-row space-x-1 items-center">
-              <FaRoute className="w-4 h-4 mr-1"/>
+              <FaRoute className="w-4 h-4 mr-1" />
               <p className="text-sm">{metersToMiles(directionsData.routes[0].distance)}</p>
               <p className="text-sm">mi</p>
             </div>
-            <Button variant="outline" size="sm">
+            <Button variant="outline" size="sm" onClick={() => setOpenSteps(prev => !prev)}>
               Details
-              <ChevronDown className="ml-2 w-5 h-5" />
+              <ChevronDown className={`${openSteps && 'rotate-180'} ml-2 w-5 h-5`} />
             </Button>
           </span>
+          <ScrollArea className={`${openSteps ? 'h-32 w-full' : 'h-0 w-0'} transition-size duration-300 ease-in-out rounded-md dark:bg-slate-950 mt-2`}>
+            {getDirections()}
+          </ScrollArea>
         </div>
       </div>}
     </>
@@ -57,4 +123,11 @@ function metersToMiles(meters: number): number {
   const miles = meters * 0.000621371;
   const roundedMiles = Math.round(miles * 10) / 10;
   return roundedMiles;
+}
+
+function metersToFeet(meters: number): number {
+  const feetConversionFactor = 3.28084;
+  const feetValue = meters * feetConversionFactor;
+  const feetRounded = +feetValue.toFixed(1);
+  return feetRounded;
 }

tailwind.config.ts

@@ -17,7 +17,7 @@ module.exports = {
     },
     extend: {
       transitionProperty: {
-        'width': 'width',
+        'size': 'width, height'
       },
       keyframes: {
         "accordion-down": {