@@ -0,0 +13,4 @@
+          <h1>Random Users</h1>
+          <p>Explore a diverse set of random users from all over the world!</p>
+          <div className="hero-section">
+            <button onClick={() => window.location.href = '/home'}>View Users</button>

@@ -0,0 +20,4 @@
+
+  // Fetch data from the API
+  useEffect(() => {
+    fetch('https://randomuser.me/api/?results=200')

@@ -0,0 +51,4 @@
+    if (selectedAgeRange) {
+      const [minAge, maxAge] = selectedAgeRange.split('-').map(Number);
+      filtered = filtered.filter(user => {
+        const userAge = new Date().getFullYear() - new Date(user.dob.date).getFullYear();

@@ -0,0 +64,4 @@
+    // Sorting logic
+    if (sortBy === 'name') {
+      filtered = filtered.sort((a, b) => {
+        const nameA = `${a.name.first} ${a.name.last}`.toLowerCase();

@@ -0,0 +67,4 @@
+        const nameA = `${a.name.first} ${a.name.last}`.toLowerCase();
+        const nameB = `${b.name.first} ${b.name.last}`.toLowerCase();
+        if (sortOrder === 'asc') {
+          return nameA.localeCompare(nameB);

@@ -0,0 +90,4 @@
+
+  // Pagination logic
+  const indexOfLastUser = currentPage * usersPerPage;
+  const currentUsers = filteredData.slice(indexOfLastUser - usersPerPage, indexOfLastUser);

@@ -0,0 +99,4 @@
+  for (let i = 1; i <= totalPages; i++) {
+    if (i <= 2 || i > totalPages - 2 || (i >= currentPage - maxPageRange && i <= currentPage + maxPageRange)) {
+      pageNumbers.push(i);
+    } else if (pageNumbers[pageNumbers.length - 1] !== '...') {

@@ -0,0 +107,4 @@
+  // Function to handle clicking on More Info
+  const handleMoreInfo = (user) => {
+    setUserDetail(user);
+    navigate(`/user-details`);

@@ -0,0 +138,4 @@
+      {filteredData.length > 0 ? (
+        <>
+          <div className="user-grid">
+            {currentUsers.map(user => (

@@ -0,0 +14,4 @@
+    <div className="user-card" key={user.email}>
+      <img src={user.picture.medium} alt={user.name.first} />
+      <div className="user-info">
+        <h3>{user.name.first} {user.name.last}</h3>

@@ -0,0 +17,4 @@
+    const userData = [
+      ['First Name', 'Last Name', 'Email', 'Phone', 'Cell', 'Address', 'Date of Birth', 'Nationality', 'Timezone', 'Coordinates', 'Username'],
+      [
+        user.name.first,

@@ -0,0 +23,4 @@
+        user.phone,
+        user.cell,
+        `${user.location.street.number} ${user.location.street.name}, ${user.location.city}, ${user.location.state}, ${user.location.country} - ${user.location.postcode}`,
+        new Date(user.dob.date).toLocaleDateString(),

@@ -0,0 +26,4 @@
+        new Date(user.dob.date).toLocaleDateString(),
+        user.nat,
+        user.location.timezone.description,
+        `${user.location.coordinates.latitude}, ${user.location.coordinates.longitude}`,

@@ -0,0 +41,4 @@
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `${user.name.first}_${user.name.last}_details.csv`);

@@ -0,0 +52,4 @@
+
+  return (
+    <div className="user-details">
+      <h2>{user.name.first} {user.name.last}</h2>

@@ -0,0 +57,4 @@
+      
+      {/* Display user details */}
+      <div className="user-info">
+        <div><strong>Email:</strong> {user.email}</div>

@@ -0,0 +61,4 @@
+        <div><strong>Phone:</strong> {user.phone}</div>
+        <div><strong>Cell:</strong> {user.cell}</div>
+        <div>
+          <strong>Location:</strong> {user.location.street.number} {user.location.street.name}, {user.location.city}, {user.location.state}, {user.location.country} - {user.location.postcode}

@@ -0,0 +63,4 @@
+        <div>
+          <strong>Location:</strong> {user.location.street.number} {user.location.street.name}, {user.location.city}, {user.location.state}, {user.location.country} - {user.location.postcode}
+        </div>
+        <div><strong>Date of Birth:</strong> {new Date(user.dob.date).toLocaleDateString()}</div>

@@ -0,0 +67,4 @@
+        <div><strong>Nationality:</strong> {user.nat}</div>
+        <div><strong>Timezone:</strong> {user.location.timezone.description}</div>
+        <div>
+          <strong>Coordinates:</strong> {user.location.coordinates.latitude}, {user.location.coordinates.longitude}

@@ -0,0 +69,4 @@
+        <div>
+          <strong>Coordinates:</strong> {user.location.coordinates.latitude}, {user.location.coordinates.longitude}
+        </div>
+        <div><strong>Username:</strong> {user.login.username}</div>