started redesign on dashbaord. changed vite basename to /Mobile, currently folkstone address

src/components/PlateStack/NumberPlate.tsx

@@ -4,21 +4,53 @@ import { formatNumberPlate } from "../../utils/utils";
 type NumberPlateProps = {
   vrm?: string | undefined;
   motion?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
 };
 
-const NumberPlate = ({ motion, vrm }: NumberPlateProps) => {
+const NumberPlate = ({ motion, vrm, 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 w-[16rem] border-6 border-black rounded-xl text-nowrap
-  text-black px-6 py-2
-  ${motion ? "bg-yellow-400" : "bg-white"}
-  `}
+      className={`relative ${options.plateWidth} ${
+        options.borderWidth
+      } border-black rounded-xl text-nowrap
+        text-black px-6 py-2
+        ${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 text-3xl text-right">
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>
           {vrm && formatNumberPlate(vrm)}
         </p>
       </div>