Implement video feed feature with components, hooks, and utility functions

src/features/dashboard/components/platePatch/NumberPlate.tsx

@@ -0,0 +1,57 @@
+import { GB } from "country-flag-icons/react/3x2";
+import { formatNumberPlate } from "../../../../utils/utils";
+
+type NumberPlateProps = {
+  vrm?: string | undefined;
+  motion?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
+};
+
+const NumberPlate = ({ vrm, motion, size }: NumberPlateProps) => {
+  let options = {
+    plateWidth: "w-[14rem]",
+    textSize: "text-2xl",
+    borderWidth: "border-6",
+  };
+
+  switch (size) {
+    case "xs":
+      options = {
+        plateWidth: "w-[8rem]",
+        textSize: "text-md",
+        borderWidth: "border-4",
+      };
+      break;
+    case "sm":
+      options = {
+        plateWidth: "w-[10rem]",
+        textSize: "text-lg",
+        borderWidth: "border-4",
+      };
+      break;
+    case "lg":
+      options = {
+        plateWidth: "w-[16rem]",
+        textSize: "text-3xl",
+        borderWidth: "border-6",
+      };
+      break;
+  }
+
+  return (
+    <div
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
+        text-black px-6 py-2 text-monospace font-mono flex items-center justify-center
+        ${motion ? "bg-yellow-400" : "bg-white"}`}
+    >
+      <div>
+        <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
+          <GB />
+        </div>
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
+      </div>
+    </div>
+  );
+};
+
+export default NumberPlate;