initial commit

src/components/PlateStack/NumberPlate.tsx

@@ -0,0 +1,29 @@
+import { GB } from "country-flag-icons/react/3x2";
+import { formatNumberPlate } from "../../utils/utils";
+import type { Sighting } from "../../types/types";
+
+type NumberPlateProps = {
+  sighting: Sighting;
+};
+
+const NumberPlate = ({ sighting }: NumberPlateProps) => {
+  return (
+    <div
+      className={`relative w-[8rem] border-4 border-black rounded-lg text-nowrap
+      text-black px-3 
+      ${sighting?.motion !== "towards" ? "bg-yellow-400" : "bg-white"}
+      `}
+    >
+      <div className="">
+        <div className="absolute inset-y-0 left-0 bg-blue-600 w-4 flex flex-col">
+          <GB />
+        </div>
+        <p className=" pl-2 font-extrabold text-right">
+          {formatNumberPlate(sighting?.vrm)}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default NumberPlate;