import styles from “./App.css”;
import { BrowserRouter as Router, Route, Routes } from “react-router-dom”;
import axios from ‘axios’
import {View} from ‘react-native’;
import { useFormStatus } from “react-dom”;
import React, { useOptimistic, useState, useEffect, useRef, Component } from ‘react’;
import {useDropzone} from “react-dropzone”;
function App({ onSubmit, onChange }){
const [files, setFiles] = useState([]);
const {getRootProps, getInputProps} = useDropzone({
accept: {“image/*”: []},
onDrop: acceptedFiles => {
setFiles(
acceptedFiles.map(file =>
Object.assign(file, {
preview: URL.createObjectURL(file)
})
)
);
},
});
const thumbs = files.map(file => (
<img style={{ maxWidth: “100%”, maxHeight: “100%” }} src={file.preview} onLoad={() => URL.revokeObjectURL(file.preview)} alt={file.name} />
));
useEffect(() => {
// Revoke the data uris to avoid memory leaks on unmount
return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);
return (
<>
Spin the Black Circle!
Managing Your Vinyl Record Collection
</div>
<div className="container disable">
<h2>Easy Image Editor</h2>
<div className="wrapper">
<form method="post" onSubmit={onSubmit}>
<label>
Text input: <input onChange={onChange} />
</label>
<button type="reset">Reset form</button>
<button type="submit">Submit form</button>
Drag 'n' drop some files here, or click to select files