- finland version release

src/components/PlateStack/NumberPlate.tsx

@@ -1,5 +1,5 @@
-import { GB } from "country-flag-icons/react/3x2";
+// import { EU } from "country-flag-icons/react/3x2";
-import { formatNumberPlate } from "../../utils/utils";
+import { formatNumberPlateEU } from "../../utils/utils";
 
 type NumberPlateProps = {
   vrm?: string | undefined;
@@ -40,19 +40,16 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
 
   return (
     <div
-      className={`relative ${options.plateWidth} ${
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
-        options.borderWidth
-      } border-black rounded-xl text-nowrap
         text-black px-6 py-2
-        ${motion ? "bg-yellow-400" : "bg-white"}`}
+        ${motion ? "bg-white" : "bg-white"}`}
     >
       <div>
-        <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
+        {/* <div className="absolute inset-y-0 left-0 bg-[#003399] w-8 flex flex-col">
-          <GB />
+          <EU />
-        </div>
+          <small className="text-white font-semibold text-center">FIN</small>
-        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>
+        </div> */}
-          {vrm && formatNumberPlate(vrm)}
+        <p className={`pl-4 font-extrabold ${options.textSize} text-center`}>{vrm && formatNumberPlateEU(vrm)}</p>
-        </p>
       </div>
     </div>
   );

src/utils/utils.ts

@@ -2,6 +2,7 @@ import switchSound from "../assets/sounds/ui/switch.mp3";
 import popup from "../assets/sounds/ui/popup_open.mp3";
 import notification from "../assets/sounds/ui/notification.mp3";
 import type { HotlistMatches, SightingType } from "../types/types";
+import { hasFlag } from "country-flag-icons";
 
 export function getSoundFileURL(name: string) {
   const sounds: Record<string, string> = {
@@ -78,6 +79,12 @@ export const formatNumberPlate = (plate: string) => {
   const formattedPlate = splittedPlate?.join("");
   return formattedPlate;
 };
+export const formatNumberPlateEU = (plate: string) => {
+  const splittedPlate = plate?.split("");
+  splittedPlate?.splice(3, 0, " ");
+  const formattedPlate = splittedPlate?.join("");
+  return formattedPlate;
+};
 
 export const BLANK_IMG = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 
@@ -142,3 +149,8 @@ export function getHotlistName(obj: HotlistMatches | undefined) {
 
 export const getNPEDCategory = (r?: SightingType | null) =>
   r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | undefined;
+
+export const numberPlateFlag = (countryCode: string) => {
+  const result = hasFlag(countryCode) === true;
+  console.log(result);
+};