58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
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 = ({ 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 ${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 ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NumberPlate;
|