63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
|
|
interface VehicleAttribute {
|
|
key: string;
|
|
name: string;
|
|
value: string;
|
|
}
|
|
|
|
interface VehicleAttributesTooltipProps {
|
|
show: boolean;
|
|
position: { x: number; y: number };
|
|
vehicleName?: string;
|
|
vehicleAttributes: VehicleAttribute[];
|
|
onMouseEnter?: () => void;
|
|
onMouseLeave?: () => void;
|
|
imageUrl?: string; // опционально, для будущего
|
|
}
|
|
|
|
const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
|
|
show,
|
|
position,
|
|
vehicleAttributes,
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
imageUrl,
|
|
}) => {
|
|
if (!show) return null;
|
|
return (
|
|
<div
|
|
className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
|
|
style={{
|
|
left: `${position.x + 120}px`,
|
|
top: `${position.y}px`,
|
|
}}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
{/* Фоновое изображение, если будет нужно */}
|
|
{imageUrl && (
|
|
<img
|
|
loading="lazy"
|
|
src={imageUrl}
|
|
className="object-cover absolute inset-0 size-full rounded-2xl opacity-10 pointer-events-none"
|
|
alt="vehicle background"
|
|
/>
|
|
)}
|
|
<div className="flex relative flex-col w-full">
|
|
{vehicleAttributes.map((attr, idx) => (
|
|
<div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
|
|
<div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
|
|
{attr.name}
|
|
</div>
|
|
<div className="self-stretch my-auto font-medium text-black truncate">
|
|
{attr.value}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VehicleAttributesTooltip;
|