|
|
|
|
@@ -32,58 +32,7 @@ interface InteractiveGermanyMapProps {
|
|
|
|
|
hideStandorte?: boolean;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
|
|
|
|
|
<div
|
|
|
|
|
className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
|
|
|
|
|
style={{
|
|
|
|
|
left: `${loc.x}%`,
|
|
|
|
|
top: `${loc.y}%`,
|
|
|
|
|
transform: 'translate(-50%, -50%)',
|
|
|
|
|
}}
|
|
|
|
|
onMouseEnter={() => onEnter(loc)}
|
|
|
|
|
onMouseLeave={onLeave}
|
|
|
|
|
onTouchStart={() => onEnter(loc)}
|
|
|
|
|
onClick={() => onEnter(loc)}
|
|
|
|
|
>
|
|
|
|
|
<div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${isActive ? 'bg-white scale-150 shadow-[0_0_10px_rgba(130,237,32,1)]' : 'bg-primary/80 group-hover/minor:bg-white group-hover/minor:scale-150'}`} />
|
|
|
|
|
<div className="absolute inset-0 m-auto w-2 h-2 bg-primary rounded-full opacity-0 group-hover/minor:animate-ping" />
|
|
|
|
|
</div>
|
|
|
|
|
));
|
|
|
|
|
MinorNode.displayName = 'MinorNode';
|
|
|
|
|
|
|
|
|
|
const MajorNode = React.memo(({ loc, isActive, idx, onEnter, onLeave }: { loc: Location, isActive: boolean, idx: number, onEnter: (loc: Location) => void, onLeave: () => void }) => {
|
|
|
|
|
const isHQ = loc.type === 'hq';
|
|
|
|
|
const isBranch = loc.type === 'branch';
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className={`absolute transform -translate-x-1/2 -translate-y-1/2 group/pin cursor-pointer w-16 h-16 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-20 hover:z-40'}`}
|
|
|
|
|
style={{ left: `${loc.x}%`, top: `${loc.y}%` }}
|
|
|
|
|
onMouseEnter={() => onEnter(loc)}
|
|
|
|
|
onMouseLeave={onLeave}
|
|
|
|
|
onTouchStart={() => onEnter(loc)}
|
|
|
|
|
onClick={() => onEnter(loc)}
|
|
|
|
|
>
|
|
|
|
|
{(isHQ || isBranch) && (
|
|
|
|
|
<div className="absolute inset-0 m-auto w-6 h-6 rounded-full animate-ping bg-primary/50 scale-150" />
|
|
|
|
|
)}
|
|
|
|
|
<m.div
|
|
|
|
|
initial={{ scale: 0 }}
|
|
|
|
|
animate={{ scale: 1 }}
|
|
|
|
|
transition={{ type: 'spring', delay: idx * 0.1 }}
|
|
|
|
|
className={`relative flex items-center justify-center rounded-full shadow-[0_0_20px_rgba(130,237,32,0.6)] transition-transform duration-300 ${
|
|
|
|
|
isActive ? 'scale-125 z-30 ring-4 ring-primary/40' : 'scale-100 group-hover/pin:scale-110'
|
|
|
|
|
} ${
|
|
|
|
|
isHQ || isBranch
|
|
|
|
|
? 'w-7 h-7 bg-primary text-[#050B14]'
|
|
|
|
|
: 'w-4 h-4 bg-white ring-[3px] ring-primary'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{(isHQ || isBranch) && <MapPin className="w-4 h-4" />}
|
|
|
|
|
</m.div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
MajorNode.displayName = 'MajorNode';
|
|
|
|
|
|
|
|
|
|
export function InteractiveGermanyMap({
|
|
|
|
|
badge,
|
|
|
|
|
|