App.js

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [routes, setRoutes] = useState([]);
  const [userLocation, setUserLocation] = useState(null);

  useEffect(() => {
    // Simulate fetching safe routes based on user location
    if (userLocation) {
      fetchSafeRoutes(userLocation);
    }
  }, [userLocation]);

  const fetchSafeRoutes = async (location) => {
    // Simulate API call to fetch safe routes
    setTimeout(() => {
      setRoutes([
        { id: 1, name: 'Safe Route 1', distance: '5km', safetyRating: 'High' },
        { id: 2, name: 'Safe Route 2', distance: '3km', safetyRating: 'Medium' },
        { id: 3, name: 'Safe Route 3', distance: '7km', safetyRating: 'High' }
      ]);
    }, 1000);
  };

  const handleLocationChange = (event) => {
    setUserLocation(event.target.value);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1 className="text-4xl font-bold text-gray-800">Safe Routes for Walking and Running</h1>
        <input
          type="text"
          placeholder="Enter your location"
          onChange={handleLocationChange}
          className="mt-4 p-2 border-2 border-gray-300 rounded-lg"
        />
      </header>
      <main className="p-4">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {routes.map(route => (
            <div key={route.id} className="p-4 shadow-lg rounded-lg bg-white">
              <h2 className="text-xl font-semibold text-gray-700">{route.name}</h2>
              <p className="text-gray-500">Distance: {route.distance}</p>
              <p className="text-gray-500">Safety Rating: {route.safetyRating}</p>
            </div>
          ))}
        </div>
      </main>
      <footer className="p-4 mt-8 bg-gray-800 text-white">
        <p>© 2025 Safe Routes App. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;