Remove old flutter code for React code
This commit is contained in:
SUFIYANJT
@@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import {
|
||||
CloudUpload as CloudUploadIcon,
|
||||
PlayArrow as PlayArrowIcon,
|
||||
Check as CheckIcon
|
||||
} from '@mui/icons-material';
|
||||
|
||||
function LandingPage() {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: 'calc(100vh - 64px)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundImage: 'linear-gradient(to bottom right, #3f51b5, #9c27b0)',
|
||||
padding: theme.spacing(3),
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="md">
|
||||
<Paper
|
||||
elevation={3}
|
||||
sx={{
|
||||
padding: theme.spacing(6),
|
||||
textAlign: 'center',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h3" gutterBottom color="primary">
|
||||
Welcome to Freq Split
|
||||
</Typography>
|
||||
<Typography variant="h5" paragraph color="textSecondary">
|
||||
Upload, preview, and process your audio and video files with ease
|
||||
</Typography>
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="large"
|
||||
startIcon={<CloudUploadIcon />}
|
||||
onClick={() => navigate('/upload')}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Grid container spacing={4} sx={{ mt: 4 }}>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<CloudUploadIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Easy Upload
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Drag and drop your media files for quick processing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<PlayArrowIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Preview Media
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Review your files before processing
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent sx={{ textAlign: 'center' }}>
|
||||
<CheckIcon color="primary" sx={{ fontSize: 60, mb: 2 }} />
|
||||
<Typography variant="h5" gutterBottom>
|
||||
View Results
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
Download and share your processed media
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default LandingPage;
|
||||
@@ -0,0 +1,142 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
LinearProgress,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import { VolumeUp as VolumeUpIcon, ErrorOutline as ErrorIcon } from '@mui/icons-material';
|
||||
import StepperComponent from '../components/StepperComponent';
|
||||
import { useMediaContext } from '../contexts/MediaContext';
|
||||
|
||||
function PreviewPage() {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const { mediaFile } = useMediaContext();
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const videoRef = useRef(null);
|
||||
|
||||
// Supported video formats
|
||||
const supportedFormats = ['video/mp4', 'video/webm', 'video/ogg'];
|
||||
const isVideo = mediaFile && supportedFormats.includes(mediaFile.type);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mediaFile) {
|
||||
navigate('/upload');
|
||||
}
|
||||
}, [mediaFile, navigate]);
|
||||
|
||||
const togglePlay = () => {
|
||||
if (videoRef.current) {
|
||||
if (isPlaying) {
|
||||
videoRef.current.pause();
|
||||
} else {
|
||||
videoRef.current.play();
|
||||
}
|
||||
setIsPlaying(!isPlaying);
|
||||
}
|
||||
};
|
||||
|
||||
if (!mediaFile) return <LinearProgress />;
|
||||
|
||||
return (
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<StepperComponent activeStep={1} />
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Typography variant="h4" gutterBottom color="primary" align="center">
|
||||
Preview Your Media
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph color="textSecondary" align="center">
|
||||
Review your file before processing
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
|
||||
{isVideo ? (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'black',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={mediaFile.url}
|
||||
style={{ width: '100%', borderRadius: 8 }}
|
||||
controls
|
||||
onError={() => setError(true)}
|
||||
onPlay={() => setIsPlaying(true)}
|
||||
onPause={() => setIsPlaying(false)}
|
||||
/>
|
||||
{error && (
|
||||
<Typography color="error" sx={{ mt: 2 }}>
|
||||
<ErrorIcon sx={{ mr: 1 }} />
|
||||
Video format not supported. Please upload MP4, WebM, or Ogg.
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
) : mediaFile.type.startsWith('audio/') ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
p: 4,
|
||||
bgcolor: 'rgba(0, 0, 0, 0.04)',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
<VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} />
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{mediaFile.name}
|
||||
</Typography>
|
||||
<Box sx={{ width: '100%', mt: 2 }}>
|
||||
<audio
|
||||
ref={videoRef}
|
||||
src={mediaFile.url}
|
||||
style={{ width: '100%' }}
|
||||
controls
|
||||
onPlay={() => setIsPlaying(true)}
|
||||
onPause={() => setIsPlaying(false)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography color="error" sx={{ mt: 2 }}>
|
||||
<ErrorIcon sx={{ mr: 1 }} />
|
||||
Unsupported media format. Please upload a valid audio or video file.
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={() => navigate('/upload')}
|
||||
>
|
||||
Back to Upload
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => navigate('/processing')}
|
||||
>
|
||||
Process Media
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default PreviewPage;
|
||||
@@ -0,0 +1,72 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Paper,
|
||||
Box,
|
||||
LinearProgress
|
||||
} from '@mui/material';
|
||||
import StepperComponent from '../components/StepperComponent';
|
||||
import { useMediaContext } from '../contexts/MediaContext';
|
||||
|
||||
function ProcessingPage() {
|
||||
const navigate = useNavigate();
|
||||
const { mediaFile } = useMediaContext();
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mediaFile) {
|
||||
navigate('/upload');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate processing progress
|
||||
const interval = setInterval(() => {
|
||||
setProgress((prevProgress) => {
|
||||
const newProgress = prevProgress + 10;
|
||||
if (newProgress >= 100) {
|
||||
clearInterval(interval);
|
||||
setTimeout(() => navigate('/results'), 500);
|
||||
return 100;
|
||||
}
|
||||
return newProgress;
|
||||
});
|
||||
}, 800);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [mediaFile, navigate]);
|
||||
|
||||
return (
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<StepperComponent activeStep={2} />
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h4" gutterBottom color="primary">
|
||||
Processing Your Media
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph color="textSecondary">
|
||||
Please wait while we process your file
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 4, mb: 2 }}>
|
||||
<LinearProgress variant="determinate" value={progress} sx={{ height: 10, borderRadius: 5 }} />
|
||||
<Typography variant="body2" color="textSecondary" sx={{ mt: 1 }}>
|
||||
{Math.round(progress)}% Complete
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 6 }}>
|
||||
<Typography variant="body1" color="textSecondary">
|
||||
{progress < 30 ? "Analyzing media..." :
|
||||
progress < 60 ? "Applying processing..." :
|
||||
progress < 90 ? "Finalizing..." :
|
||||
"Almost done..."}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProcessingPage;
|
||||
@@ -0,0 +1,194 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
Card,
|
||||
CardContent,
|
||||
Grid,
|
||||
LinearProgress,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Check as CheckIcon,
|
||||
VolumeUp as VolumeUpIcon
|
||||
} from '@mui/icons-material';
|
||||
import StepperComponent from '../components/StepperComponent';
|
||||
import { useMediaContext } from '../contexts/MediaContext';
|
||||
|
||||
function ResultsPage() {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const { mediaFile, clearMedia } = useMediaContext();
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const videoRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mediaFile) {
|
||||
navigate('/upload');
|
||||
}
|
||||
}, [mediaFile, navigate]);
|
||||
|
||||
const togglePlay = () => {
|
||||
if (videoRef.current) {
|
||||
if (isPlaying) {
|
||||
videoRef.current.pause();
|
||||
} else {
|
||||
videoRef.current.play();
|
||||
}
|
||||
setIsPlaying(!isPlaying);
|
||||
}
|
||||
};
|
||||
|
||||
const handleProcessAnother = () => {
|
||||
clearMedia();
|
||||
navigate('/upload');
|
||||
};
|
||||
|
||||
if (!mediaFile) return <LinearProgress />;
|
||||
|
||||
const isVideo = mediaFile.type.includes('video');
|
||||
|
||||
return (
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<StepperComponent activeStep={3} />
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 3 }}>
|
||||
<CheckIcon sx={{ color: 'success.main', fontSize: 36, mr: 1 }} />
|
||||
<Typography variant="h4" color="primary">
|
||||
Processing Complete!
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body1" paragraph color="textSecondary" align="center">
|
||||
Your processed media is ready to view and download
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 4, mb: 4, textAlign: 'center' }}>
|
||||
{isVideo ? (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
bgcolor: 'black',
|
||||
}}
|
||||
>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={mediaFile.url}
|
||||
style={{ width: '100%', borderRadius: 8 }}
|
||||
controls
|
||||
onPlay={() => setIsPlaying(true)}
|
||||
onPause={() => setIsPlaying(false)}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
p: 4,
|
||||
bgcolor: 'rgba(0, 0, 0, 0.04)',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
<VolumeUpIcon color="primary" sx={{ fontSize: 80, mb: 2 }} />
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{mediaFile.name} (Processed)
|
||||
</Typography>
|
||||
<Box sx={{ width: '100%', mt: 2 }}>
|
||||
<audio
|
||||
ref={videoRef}
|
||||
src={mediaFile.url}
|
||||
style={{ width: '100%' }}
|
||||
controls
|
||||
onPlay={() => setIsPlaying(true)}
|
||||
onPause={() => setIsPlaying(false)}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={3} sx={{ mt: 2 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Card sx={{ height: '100%' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
File Details
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
<strong>Name:</strong> {mediaFile.name} (Processed)
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
<strong>Type:</strong> {mediaFile.type}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
<strong>Size:</strong> {(mediaFile.size / (1024 * 1024)).toFixed(2)} MB
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
|
||||
<CardContent>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Actions
|
||||
</Typography>
|
||||
<Typography variant="body2" paragraph color="textSecondary">
|
||||
Download or share your processed media
|
||||
</Typography>
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
sx={{ mb: 1 }}
|
||||
onClick={() => alert('Downloading file...')}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
fullWidth
|
||||
onClick={() => alert('Sharing file...')}
|
||||
>
|
||||
Share
|
||||
</Button>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
onClick={handleProcessAnother}
|
||||
>
|
||||
Process Another File
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => navigate('/')}
|
||||
>
|
||||
Back to Home
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default ResultsPage;
|
||||
@@ -0,0 +1,142 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Typography,
|
||||
Container,
|
||||
Button,
|
||||
Paper,
|
||||
Box,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import {
|
||||
CloudUpload as CloudUploadIcon,
|
||||
VolumeUp as VolumeUpIcon,
|
||||
Movie as MovieIcon
|
||||
} from '@mui/icons-material';
|
||||
import StepperComponent from '../components/StepperComponent';
|
||||
import { useMediaContext } from '../contexts/MediaContext';
|
||||
|
||||
function UploadPage() {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const { setMediaFile } = useMediaContext(); // ✅ Correct function name
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [fileError, setFileError] = useState('');
|
||||
|
||||
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
|
||||
const droppedFile = e.dataTransfer.files[0];
|
||||
validateAndSetFile(droppedFile);
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = e.target.files?.[0] || null;
|
||||
validateAndSetFile(selectedFile);
|
||||
};
|
||||
|
||||
const validateAndSetFile = (file: File | null) => {
|
||||
setFileError('');
|
||||
|
||||
if (!file) return;
|
||||
|
||||
const fileType = file.type;
|
||||
if (!fileType.includes('audio') && !fileType.includes('video')) {
|
||||
setFileError('Please upload only audio or video files.');
|
||||
return;
|
||||
}
|
||||
|
||||
setFile(file);
|
||||
};
|
||||
|
||||
const handleContinue = () => {
|
||||
if (file) {
|
||||
setMediaFile({
|
||||
name: file.name,
|
||||
url: URL.createObjectURL(file),
|
||||
type: file.type
|
||||
}); // ✅ Corrected function call
|
||||
navigate('/preview');
|
||||
} else {
|
||||
setFileError('Please upload a file to continue.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<StepperComponent activeStep={0} />
|
||||
|
||||
<Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
|
||||
<Typography variant="h4" gutterBottom color="primary">
|
||||
Upload Your Media
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph color="textSecondary">
|
||||
Drag and drop your audio or video file, or click to browse
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
border: `2px dashed ${isDragging ? theme.palette.primary.main : theme.palette.divider}`,
|
||||
borderRadius: 2,
|
||||
p: 6,
|
||||
mt: 3,
|
||||
mb: 3,
|
||||
backgroundColor: isDragging ? 'rgba(63, 81, 181, 0.08)' : 'transparent',
|
||||
transition: 'all 0.3s ease',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
onClick={() => document.getElementById('fileInput')?.click()}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleFileChange}
|
||||
accept="audio/*,video/*"
|
||||
/>
|
||||
<CloudUploadIcon color="primary" sx={{ fontSize: 64, mb: 2 }} />
|
||||
<Typography variant="h6" gutterBottom>
|
||||
{file ? file.name : 'Drop your file here or click to browse'}
|
||||
</Typography>
|
||||
{file && (
|
||||
<Typography variant="body2" color="textSecondary">
|
||||
{file.type.includes('video') ? <MovieIcon sx={{ mr: 1 }} /> : <VolumeUpIcon sx={{ mr: 1 }} />}
|
||||
{file.type} - {(file.size / (1024 * 1024)).toFixed(2)} MB
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{fileError && (
|
||||
<Typography variant="body2" color="error" sx={{ mt: 1 }}>
|
||||
{fileError}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Button variant="outlined" color="primary" onClick={() => navigate('/')}>
|
||||
Back to Home
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" onClick={handleContinue} disabled={!file}>
|
||||
Continue to Preview
|
||||
</Button>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default UploadPage;
|
||||
Reference in New Issue
Block a user