94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import type { SightingWidgetType } from "../../types/types";
|
|
|
|
type SightingWidgetDetailsProps = {
|
|
effectiveSelected: SightingWidgetType | null;
|
|
};
|
|
|
|
const SightingWidgetDetails = ({
|
|
effectiveSelected,
|
|
}: SightingWidgetDetailsProps) => {
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
|
|
<div>
|
|
Make:{" "}
|
|
<span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
|
|
</div>
|
|
<div>
|
|
Model:{" "}
|
|
<span className="opacity-90">{effectiveSelected?.model ?? "—"}</span>
|
|
</div>
|
|
<div>
|
|
Colour:{" "}
|
|
<span className="opacity-90">{effectiveSelected?.color ?? "—"}</span>
|
|
</div>
|
|
<div>
|
|
Category:{" "}
|
|
<span className="opacity-90">{effectiveSelected?.category ?? "—"}</span>
|
|
</div>
|
|
<div>
|
|
Char Ht:{" "}
|
|
<span className="opacity-90">
|
|
{effectiveSelected?.charHeight ?? "—"}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Plate Size:{" "}
|
|
<span className="opacity-90">
|
|
{effectiveSelected?.plateSize ?? "—"}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Overview Size:{" "}
|
|
<span className="opacity-90">
|
|
{effectiveSelected?.overviewSize ?? "—"}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Motion:{" "}
|
|
<span className="opacity-90">{effectiveSelected?.motion ?? "—"}</span>
|
|
</div>
|
|
<div>
|
|
Seen:{" "}
|
|
<span className="opacity-90">
|
|
{effectiveSelected?.seenCount ?? "—"}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Location:{" "}
|
|
<span className="opacity-90">
|
|
{effectiveSelected?.locationName ?? "—"}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Lane:{" "}
|
|
<span className="opacity-90">{effectiveSelected?.laneID ?? "—"}</span>
|
|
</div>
|
|
<div>
|
|
Radar:{" "}
|
|
<span className="opacity-90">
|
|
{effectiveSelected?.radarSpeed ?? "—"}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
Track:{" "}
|
|
<span className="opacity-90">
|
|
{effectiveSelected?.trackSpeed ?? "—"}
|
|
</span>
|
|
</div>
|
|
{effectiveSelected?.detailsUrl ? (
|
|
<div className="col-span-full">
|
|
<a
|
|
href={effectiveSelected.detailsUrl}
|
|
target="_blank"
|
|
className="underline text-blue-300"
|
|
>
|
|
Sighting Details
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SightingWidgetDetails;
|