Error occurred when fetching sidebar data
fix: update
import { Container, Typography } from '@mui/material'; | |||
import { Alert, Button, Card, CardActions, CardContent, CardHeader, Container, Grid, Typography } from '@mui/material'; | |||
import Head from 'next/head'; | |||
import { useCallback, useState } from 'react'; | |||
import { ComingSoonIllustration } from 'src/assets/illustrations'; | |||
import CustomBreadcrumbs from 'src/components/custom-breadcrumbs/CustomBreadcrumbs'; | |||
import Iconify from 'src/components/iconify/Iconify'; | |||
import HomeWidget from 'src/sections/@dashboard/spokenLanguageTranslation-module/HomeWidget'; | |||
import _mock from '../../../_mock'; | |||
import Editor from '../../../components/editor'; | |||
import { useSettingsContext } from '../../../components/settings'; | |||
import { Upload } from '../../../components/upload'; | |||
import DashboardLayout from '../../../layouts/dashboard'; | |||
import { | |||
CarouselBasic3 | |||
} from '../../../sections/_examples/extra/carousel'; | |||
SpokenLanguageTranslationHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>; | |||
export default function SpokenLanguageTranslationHomePage() { | |||
const { themeStretch } = useSettingsContext(); | |||
const [translateType, setTranslateType] = useState<"video" | "text">() | |||
const [file, setFile] = useState<File | string | null>(null); | |||
const [quillSimple, setQuillSimple] = useState(''); | |||
const handleHomeWidgetOnClick = (value: string) => { | |||
if (!value) return | |||
if (value == "Video Translate") { | |||
setTranslateType("video") | |||
return | |||
} | |||
if (value == "Text Translate") { | |||
setTranslateType("text") | |||
return | |||
} | |||
} | |||
const handleDropSingleFile = useCallback((acceptedFiles: File[]) => { | |||
const file = acceptedFiles[0]; | |||
if (file) { | |||
setFile( | |||
Object.assign(file, { | |||
preview: URL.createObjectURL(file), | |||
}) | |||
); | |||
} | |||
}, []); | |||
const _carouselsExample = [...Array(5)].map((_, index) => ({ | |||
id: _mock.id(index), | |||
title: _mock.text.title(index), | |||
image: _mock.image.cover(index), | |||
description: _mock.text.description(index), | |||
})); | |||
return ( | |||
<> | |||
<Head> | |||
<title> Blank Page | SignConnect+</title> | |||
<title> Spoken Language Translation Home | SignLink </title> | |||
</Head> | |||
<Container maxWidth={themeStretch ? false : 'xl'}> | |||
<Typography variant="h6"> Blank </Typography> | |||
<CustomBreadcrumbs | |||
heading="Spoken Language Translation" | |||
links={[ | |||
{ | |||
name: 'Dashboard', | |||
href: '#', | |||
icon: <Iconify icon="eva:home-fill" />, | |||
}, | |||
{ name: 'Spoken Language Translation Module', href: '#', icon: <Iconify icon="eva:cube-outline" /> }, | |||
{ name: 'Spoken Language Translation', icon: <Iconify icon="eva:cube-outline" /> }, | |||
]} | |||
/> | |||
</Container> | |||
<Container maxWidth={themeStretch ? false : 'xl'}> | |||
<Grid container spacing={2} rowSpacing={3}> | |||
<Grid item xs={12} md={6} lg={6}> | |||
<HomeWidget | |||
title="Video Translate" | |||
subTitle="Spoken Language Video Convert to sign language" | |||
icon="eva:video-fill" | |||
color='warning' | |||
handleClick={handleHomeWidgetOnClick} | |||
/> | |||
</Grid> | |||
<Grid item xs={12} md={6} lg={6}> | |||
<HomeWidget | |||
title="Text Translate" | |||
subTitle="Spoken Language Text Convert to sign language" | |||
icon="eva:text-fill" | |||
color="success" | |||
handleClick={handleHomeWidgetOnClick} | |||
/> | |||
</Grid> | |||
{!translateType && <> | |||
<Grid item xs={12} md={12} lg={12}> | |||
<Alert severity='info' >Select a Translation type</Alert> | |||
</Grid> | |||
</>} | |||
{translateType == "video" && <> | |||
<Grid item xs={12} md={8} lg={8}> | |||
<Card> | |||
<CardHeader | |||
title="Upload Video" | |||
subheader="Upload you're video to convert to sigh language" | |||
/> | |||
<CardContent> | |||
<Upload file={file} onDrop={handleDropSingleFile} onDelete={() => setFile(null)} /> | |||
</CardContent> | |||
<CardActions> | |||
<Button variant="contained" color='error' fullWidth onClick={() => { setFile(null) }}> | |||
Reset | |||
</Button> | |||
<Button variant="contained" fullWidth> | |||
Convert | |||
</Button> | |||
</CardActions> | |||
</Card> | |||
</Grid> | |||
<Grid item xs={12} md={4} lg={4}> | |||
<Card> | |||
<CardHeader title="3D Model" /> | |||
<CardContent> | |||
<Typography variant="h3" paragraph> | |||
Coming Soon! | |||
</Typography> | |||
<Typography sx={{ color: 'text.secondary' }}> | |||
We are currently working hard on this page! | |||
</Typography> | |||
<ComingSoonIllustration sx={{ my: 1, height: 200 }} /> | |||
</CardContent> | |||
</Card> | |||
</Grid> | |||
</>} | |||
{translateType == "text" && <> | |||
<Grid item xs={12} md={8} lg={8}> | |||
<Card sx={{ height: "100%" }}> | |||
<CardHeader | |||
title="Enter text" | |||
subheader="Enter you're text to convert to sigh language" | |||
/> | |||
<CardContent> | |||
<Editor | |||
simple | |||
id="simple-editor" | |||
value={quillSimple} | |||
onChange={(value) => setQuillSimple(value)} | |||
/> | |||
</CardContent> | |||
<CardActions> | |||
<Button variant="contained" color='error' fullWidth onClick={() => { setQuillSimple('') }}> | |||
Reset | |||
</Button> | |||
<Button variant="contained" fullWidth> | |||
Convert | |||
</Button> | |||
</CardActions> | |||
</Card> | |||
</Grid> | |||
<Grid item xs={12} md={4} lg={4}> | |||
<Card> | |||
<CardHeader title="Converted Output" /> | |||
<CardContent> | |||
<CarouselBasic3 data={_carouselsExample} /> | |||
</CardContent> | |||
</Card> | |||
</Grid> | |||
</>} | |||
</Grid> | |||
</Container> | |||
</> | |||
); | |||