30 lines
792 B
TypeScript
30 lines
792 B
TypeScript
|
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;
|