Drone Market ReactJS Deployment Plans

03_Drone_Detail

Component Structure

App
│───Header
└───Content
   └───Breadcrumb
   └───DroneDetailBanner
   └───DroneAbout
   └───DroneSpecification
   └───Services
      └───ServicesItem
   └───Feedback
       └───FeedbackHeader
       └───FeedbackItem
           └───FeedbackItemButton
└───Footer

PropTypes

-- DroneDetailBanner.jsx --
DroneDetailBanner.propTypes = {
  photo: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  badge: PropTypes.bool.isRequired,
  rating: PropTypes.number.isRequired,
  availabledrones: PropTypes.number.isRequired,
  totaldrones: PropTypes.number.isRequired,
  insurance: PropTypes.number.isRequired,
  hourlyrate: PropTypes.number.isRequired,
  completedjob: PropTypes.number.isRequired,
};

-- DroneAbout.jsx --
DroneAbout.propTypes = {
  photo: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
};

-- DroneSpecification.jsx --
DroneSpecification.propTypes = {
  dronephotos: PropTypes.array.isRequired,
  dronespecification: PropTypes.array.isRequired,
  dronesbenefits: PropTypes.array.isRequired,
};

-- ServicesItem.jsx --
ServicesItem.propTypes = {
  photo: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
};

-- FeedbackItem.jsx --
FeedbackItem.propTypes = {
  photo: PropTypes.string.isRequired,
  time: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired,
};