32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
import type { IconProp } from "@fortawesome/fontawesome-svg-core";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import clsx from "clsx";
|
|
import NumberPlate from "../PlateStack/NumberPlate";
|
|
import type { SightingType } from "../../types/types";
|
|
|
|
type CameraOverviewHeaderProps = {
|
|
title?: string;
|
|
icon?: IconProp;
|
|
img?: string;
|
|
sighting?: SightingType | null;
|
|
};
|
|
|
|
const CardHeader = ({ title, icon, img, sighting }: CameraOverviewHeaderProps) => {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between"
|
|
)}
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
{icon && <FontAwesomeIcon icon={icon} className="size-4" />}
|
|
<h2 className="text-xl">{title}</h2>
|
|
</div>
|
|
{img && <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />}
|
|
{sighting?.vrm && <NumberPlate vrm={sighting.vrm} motion={false} />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardHeader;
|