Untitled

// Dashboard.js

import './Dashboard.css';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Link } from 'react-router-dom';
import imageCompression from 'browser-image-compression';

const Dashboard = () => {
  const navi = useNavigate();

  const handleImageChange = async (e) => {
    // ... unchanged logic
  };

  return (
    <>
      <header className="dash">
        <nav>
          <div className="nav-left">
            {/* Add any additional content for nav-left if needed */}
          </div>
          <div className="nav-right">
            <p className="welcome-message">Welcome !!!!! {localStorage.getItem('name')}</p>
            <Link to="/Dashboard" className="dashboard-link">Dashboard</Link>
            <br />
            <input type="file" onChange={handleImageChange} multiple className="file-input" />
            <br />
            <br />
            <Link to="/FetchImage" className="image-link">Images</Link>
          </div>
        </nav>
      </header>
      <h1 className="weather-app-heading">Weather App</h1>
      <br />
      <br />
      <button className="weather-search-button" onClick={() => navi('/Weatherdata')}>Weather Search</button>
    </>
  );
};

export default Dashboard;