Drone Market ReactJS Deployment Plans

02_Browse_Provider3(List_View_Quick_Summary Drone)

Component Structure

App
│───Header
└───Content
│   └───BrowseProvider
│   │   └───BrowseProviderHeader
│   │   │   └───BrowseProviderSearch
│   │   │   └───BrowseProviderFilter
│   │   │   └───BrowseProviderSort
│   │   └───ProvidersGrid
│   │   │   └───ProvidersGridItem
│   │   │   │   └───ProvidersGridTooltips
│   └───ProviderMap
│       └───UserLocation
│       └───DroneLocation
│       └───MapActionButtons
└───Footer

Recommended Libraries

PropTypes

-- ProvidersGridItem.jsx --
ProvidersGridItem.propTypes = {
  sponsored: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  tooltips: PropTypes.string.isRequired,
  badge: PropTypes.bool.isRequired,
  completedjob: PropTypes.array.isRequired,
  rating: PropTypes.number.isRequired,
};

-- ProvidersGridTooltips.jsx --
ProvidersGridTooltips.propTypes = {
  status: PropTypes.string.isRequired,
  distance: PropTypes.number.isRequired,
  ratepermile: PropTypes.number.isRequired,
};

-- NotificationRow.jsx --
NotificationRow.propTypes = {
  icon: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
  status: PropTypes.string.isRequired,
  time: PropTypes.string.isRequired,
};

ProviderMap.propTypes = {
  droneslocations: PropTypes.array.isRequired,
  userlocation: PropTypes.string.isRequired,
  dronetooltips: PropTypes.array.isRequired,
};