Untitled

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Link } from 'react-router-dom';
import './Dashboard.css'; // Import the CSS file
import imageCompression from 'browser-image-compression';
import axios from 'axios';

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

  const handleImageChange = (e) => {
    const files = e.target.files;
    const newImages = Array.from(files);

    // Convert images to base64 strings
    const base64Images = newImages.map(image => URL.createObjectURL(image));

    // Store base64 strings in local storage
    localStorage.setItem('uploadedImages', JSON.stringify(base64Images));
  };

  return (
    <>
      <header>
        <nav>
          <div className="nav-left">
            <h1>Sample App</h1>
          </div>
          <div className="nav-right">
            <p>Welcome !!!!! {localStorage.getItem("name")}</p>
            <Link to="/Dashboard">Dashboard</Link>
            <br />
            <br />
            <input type="file" onChange={handleImageChange} multiple />
            <br />
            <br />
            <Link to="/FetchImage">Images</Link>
          </div>
        </nav>
      </header>

      <br />
      <br />

      <button onClick={() => navi('/Weatherdata')}>Weather Search</button>
    </>
  );
};

export default Dashboard;