From 35e519416125217ba9ce39094788d0b887a83233 Mon Sep 17 00:00:00 2001
From: casperiv0 <53900565+casperiv0@users.noreply.github.com>
Date: Sun, 1 Oct 2023 08:41:00 +0200
Subject: [PATCH] fix: use next/image

---
 .../smart-motorway-signs/smart-motorway-sign-marker.tsx  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/components/dispatch/map/smart-motorway-signs/smart-motorway-sign-marker.tsx b/apps/client/src/components/dispatch/map/smart-motorway-signs/smart-motorway-sign-marker.tsx
index b76277c08..7cbea439f 100644
--- a/apps/client/src/components/dispatch/map/smart-motorway-signs/smart-motorway-sign-marker.tsx
+++ b/apps/client/src/components/dispatch/map/smart-motorway-signs/smart-motorway-sign-marker.tsx
@@ -9,6 +9,7 @@ import { generateMarkerTypes } from "../render-map-blips";
 import { Button, SelectField } from "@snailycad/ui";
 import { Permissions, usePermission } from "hooks/usePermission";
 import { toastMessage } from "lib/toastMessage";
+import Image from "next/image";
 
 interface Props {
   marker: SmartMotorwaySignMarker & { id: number };
@@ -98,13 +99,19 @@ export function SmartMotorwaySignsMarker({ marker }: Props) {
                     return newConfig;
                   })
                 }
+                isClearable
                 key={idx}
                 label="Lane Speed"
                 options={SPEED_INDICATORS.map((key) => ({
                   textValue: t(`motorway_sign_${key}`),
                   label: (
                     <p className="flex items-center gap-2">
-                      <img src={`/map/smart-motorways/${key}.png`} width={30} height={30} />
+                      <Image
+                        alt={t(`motorway_sign_${key}`)}
+                        src={`/map/smart-motorways/${key}.png`}
+                        width={30}
+                        height={30}
+                      />
                       {t(`motorway_sign_${key}`)}
                     </p>
                   ),