dros/src/components/DogBody.tsx

import React from 'react';

const DogBody = ({
  onPathClick,
  selectedId,
}: {
  onPathClick: (id: string) => void;
  selectedId: string | null;
}) => {
  return (
    <svg viewBox="0 0 540 471" width="100%">
      <path
        id="Dog_Skull"
        d="M145.4,92.7L123.29999,70.599997 105.7,26.600002 96.899998,37.000001 88.099994,25.800002 80.89999,63.4 65.699994,76.199998 51.299997,87.399997 37.7,98.599996 21.700002,105.8 7.3000037,113.79999 6.5000036,128.19999 18.500003,139.4 24.900003,147.39999 39.300001,150.59999 56.9,151.39999 76.899999,145.79999 90.499998,148.99999z"
        fill={selectedId === 'Dog_Skull' ? '#f5222d' : '#ccc'}
        stroke={selectedId === 'Dog_Skull' ? '#ff4d4f' : '#ccc'}
        strokeWidth={2}
        style={{ cursor: 'pointer' }}
        onClick={() => onPathClick('Dog_Skull')}
      />
      <path
        id="Dog_Spine"
        d="M119.8,126.3L198.5,175.4 286.5,175.4 374.5,174.60001 372.1,139.4 296.1,138.6 201.7,136.2 146.5,93.799999 121.7,121"
        fill={selectedId === 'Dog_Spine' ? '#f5222d' : '#ccc'}
        stroke={selectedId === 'Dog_Spine' ? '#ff4d4f' : '#ccc'}
        strokeWidth={2}
        style={{ cursor: 'pointer' }}
        onClick={() => onPathClick('Dog_Spine')}
      />
      <path
        id="Dog_FrontExtremities"
        d="M86.2,157.5L122.5,209 139.3,252.2 153.7,277.8 170.50002,288.99999 182.50002,360.2 184.10002,400.20001 181.70002,417.00001 155.30001,428.2 155.30001,441.80001 185.70002,445.00002 200.90003,425.80003 212.10004,421.00003 224.10004,388.20002 225.70004,293.80001 199.30003,178.6 115.30001,125 88.099998,152.2"
        fill={selectedId === 'Dog_FrontExtremities' ? '#f5222d' : '#ccc'}
        stroke={selectedId === 'Dog_FrontExtremities' ? '#ff4d4f' : '#ccc'}
        strokeWidth={2}
        style={{ cursor: 'pointer' }}
        onClick={() => onPathClick('Dog_FrontExtremities')}
      />
      <path
        id="Dog_Thorax"
        d="M202.2,176.7L290.5,181 308.9,274.60007 226.5,293.80008z"
        fill={selectedId === 'Dog_Thorax' ? '#f5222d' : '#ccc'}
        stroke={selectedId === 'Dog_Thorax' ? '#ff4d4f' : '#ccc'}
        strokeWidth={2}
        style={{ cursor: 'pointer' }}
        onClick={() => onPathClick('Dog_Thorax')}
      />
      <path
        id="Dog_Abdomen"
        d="M291.8,179.9L377.69999,177.79999 396.89998,253.00021 312.89999,275.40028z"
        fill={selectedId === 'Dog_Abdomen' ? '#f5222d' : '#ccc'}
        stroke={selectedId === 'Dog_Abdomen' ? '#ff4d4f' : '#ccc'}
        strokeWidth={2}
        style={{ cursor: 'pointer' }}
        onClick={() => onPathClick('Dog_Abdomen')}
      />
      <path
        id="Dog_Hip"
        d="M372.6,142.3L398.50001,253 495.29998,225 486.49999,185 508.89999,169 528.89999,143.4 536.89996,109 532.09996,84.200009 512.89997,57.800014 488.89998,38.600016 468.89998,30.600018 486.49998,57.800015 500.09997,87.400013 508.09997,113.80001 495.29997,124.20001 472.09998,138.60001 440.09999,144.20001 373.70001,137.80001"
        fill={selectedId === 'Dog_Hip' ? '#f5222d' : '#ccc'}
        stroke={selectedId === 'Dog_Hip' ? '#ff4d4f' : '#ccc'}
        strokeWidth={2}
        style={{ cursor: 'pointer' }}
        onClick={() => onPathClick('Dog_Hip')}
      />
      <path
        id="Dog_RearExtremities"
        d="M401.4,257.5L498.49999,228.2 499.3,309.00001 525.37726,349.00985 521.80024,440.19984 488.60743,438.70827 490.60017,415.39986 467.38135,428.48481 448.28146,415.68482 470.49999,401.79997 475.40014,378.59998 466.49999,344.99998 436.89999,313.79999z"
        fill={selectedId === 'Dog_RearExtremities' ? '#f5222d' : '#ccc'}
        stroke={selectedId === 'Dog_RearExtremities' ? '#ff4d4f' : '#ccc'}
        strokeWidth={2}
        style={{ cursor: 'pointer' }}
        onClick={() => onPathClick('Dog_RearExtremities')}
      />
    </svg>
  );
};

export default DogBody;