show districts name, population & other relevant information on popup when hovered upon district #30
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/aabishkaryal/nepal-districts/9sCwG2qJbR71EhmYdhPGLkqqYaok |
components/Modal.tsx
Outdated
| const Modal = (props: props) => { | ||
| const { pageY, pageX, id } = props || {} |
There was a problem hiding this comment.
export default function Modal({pageX, pageY, id}) { .... }
components/Modal.tsx
Outdated
| const districtDetails: districtDetails[] = [ | ||
| { | ||
| label: "Elevation", | ||
| value: district?.elevation | ||
| }, | ||
| { | ||
| label: "Area", | ||
| value: `${district?.area.toLocaleString('en-Us')} km²` | ||
| }, | ||
| { | ||
| label: "Province", | ||
| value: district?.province | ||
| }, | ||
| { | ||
| label: "Population", | ||
| value: district?.population |
There was a problem hiding this comment.
Since, elevation area, province and populations are always present on the data, optional chaining isn't required
There was a problem hiding this comment.
OK I had this for previous version and forgot to remove
components/Modal.tsx
Outdated
| left: pageX, | ||
| }} className="max-w-md w-56 absolute py-2 px-4 bg-white shadow-lg rounded-lg "> | ||
| <header> | ||
| <h1 className="font-bold text-gray-800 ">{district?.name}</h1> |
There was a problem hiding this comment.
unnecessary optional chaining
components/Modal.tsx
Outdated
| <main className="mt-1"> | ||
| { | ||
| districtDetails.map((district: any, index: number) => ( | ||
| <p key={index}><span className="font-semibold">{district.label}</span>: {district?.value}</p> |
There was a problem hiding this comment.
unnecessary optional chaining
There was a problem hiding this comment.
@aabishkaryal I have done changes according to your feedback. You can review now.
Added feature issued here.
Added some more data about district like district Area, Population & Elevation. This data will be visible upon mouse hover on districts.