Skip to content

2
2023-029
Commit 2b9de9a0 authored by Sumudu-Himasha-Ranaweera's avatar Sumudu-Himasha-Ranaweera
Browse files
Options

feat: add index.tsx file

parent d82e0eb2
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 3 deletions
Project/Frontend/Web_App/src/pages/dashboard/spokenLanguageTranslation-module/index.tsx
View file @ 2b9de9a0
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 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 { useSettingsContext } from '../../../components/settings';
import { Upload } from '../../../components/upload';
import DashboardLayout from '../../../layouts/dashboard'; import DashboardLayout from '../../../layouts/dashboard';
import {
CarouselBasic3
} from '../../../sections/_examples/extra/carousel';
SpokenLanguageTranslationHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>; SpokenLanguageTranslationHomePage.getLayout = (page: React.ReactElement) => <DashboardLayout>{page}</DashboardLayout>;
export default function SpokenLanguageTranslationHomePage() { export default function SpokenLanguageTranslationHomePage() {
const { themeStretch } = useSettingsContext(); 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 ( return (
<> <>
<Head> <Head>
<title> Blank Page | SignConnect+</title> <title> Spoken Language Translation Home | SignLink </title>
</Head> </Head>
<Container maxWidth={themeStretch ? false : 'xl'}> <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> </Container>
</> </>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment