Mav-Mobile-UI/src/components/PlateStack/NumberPlate.tsx

import { GB } from "country-flag-icons/react/3x2";
import { formatNumberPlate } from "../../utils/utils";

type NumberPlateProps = {
  vrm?: string | undefined;
  motion?: boolean;
};

const NumberPlate = ({ motion, vrm }: NumberPlateProps) => {
  return (
    <div
      className={`relative w-[8rem] border-4 border-black rounded-lg text-nowrap
      text-black px-3 
      ${motion ? "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">
          {vrm && formatNumberPlate(vrm)}
        </p>
      </div>
    </div>
  );
};

export default NumberPlate;