Making components better

Author: khedau1

src/layouts/contacts/id/index.tsx

@@ -4,8 +4,12 @@ function Contact() {
   let { id } = useParams();
   return (
     <div>
-      <h1>{id}</h1>
-      <img src={`https://picsum.photos/id/${id}/200/300`} />
+      <h1>Contact Details for: {id}</h1>
+      <img
+        src={`https://picsum.photos/id/${id}/200/300`}
+        loading="lazy"
+        alt={id}
+      />
     </div>
   );
 }

src/layouts/contacts/index.tsx

@@ -2,13 +2,19 @@ import { Link } from "react-router-dom";
 
 function Contacts() {
   return (
-    <ul>
-      {[1, 2, 3, 4, 5].map((contact) => (
-        <li key={contact}>
-          <Link to={`${contact}`}>{contact}</Link>
-        </li>
-      ))}
-    </ul>
+    <div>
+      <h1>All Contacts</h1>
+      <ul>
+        {Array.from(
+          { length: 10 },
+          () => Math.floor(Math.random() * 100) + 1
+        ).map((contact) => (
+          <li key={contact}>
+            <Link to={`${contact}`}>{contact}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }