leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add jitsi card

Browse source
This commit is contained in:
Leonardo Murça 2022-08-05 18:12:57 -03:00
parent 6a3d74c59c
commit 9dbd1401fc
2 changed files with 76 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/assets/jitsi.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

81
src/screens/Classroom/View.js
View file

@ -1,6 +1,7 @@
import {
Avatar,
AvatarGroup,
Button,
Card,
Container,
Grid,
@ -17,6 +18,7 @@ import { TAB_OPTIONS } from './tabOptions';
import styles from './styles';
import AnnouncementCard from '../../components/AnnouncementCard';
import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
import jitsiLogo from '../../assets/jitsi.svg';
function View({
layoutType,
@ -77,7 +79,15 @@ function View({
{announcementsTabData === null ? (
<Grid sx={container} container spacing={2}>
<Grid item xs={4}>
<Skeleton variant="rectangular" width="100%" height={200} />
{createArrayFrom1ToN(2).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={200}
sx={{ marginBottom: '30px' }}
/>
))}
</Grid>
<Grid item xs={8}>
{createArrayFrom1ToN(4).map(i => (
@ -94,14 +104,37 @@ function View({
) : (
<Grid sx={container} container spacing={2}>
<Grid item xs={4}>
<Container disableGutters>
<Stack gap="30px">
<Card
sx={{ width: '100%', padding: '20px' }}
elevation={4}
variant="elevation"
>
<Stack justifyContent="flex-start" spacing={1}>
<h3>Próximas Atividades</h3>
<Container
disableGutters
sx={{ display: 'flex', justifyContent: 'row' }}
>
<img src={jitsiLogo} alt="Jitsi Meet" />
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
</Container>
<Button
variant="contained"
href="https://google.com"
target="__blank"
>
Entrar
</Button>
</Stack>
</Card>
<Card
sx={{ width: '100%', padding: '20px' }}
elevation={4}
variant="elevation"
>
<Stack justifyContent="flex-start" spacing={1}>
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
{announcementsTabData.upcomingAssignments.map(ua => (
<Link sx={{ fontSize: '15px' }} key={ua.id}>
{ua.title}
@ -109,7 +142,7 @@ function View({
))}
</Stack>
</Card>
</Container>
</Stack>
</Grid>
<Grid item xs={8}>
<Stack
@ -189,8 +222,15 @@ function View({
gap="30px"
sx={{ marginTop: '30px' }}
>
<Skeleton variant="rectangular" width="100%" height={200} />
{createArrayFrom1ToN(2).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={200}
sx={{ marginBottom: '30px' }}
/>
))}
{createArrayFrom1ToN(4).map(i => (
<Skeleton
key={i}
@ -210,14 +250,37 @@ function View({
gap="30px"
sx={{ marginTop: '30px' }}
>
<Container disableGutters>
<Stack gap="30px">
<Card
sx={{ width: '100%', padding: '20px' }}
elevation={4}
variant="elevation"
>
<Stack justifyContent="flex-start" spacing={1}>
<h3>Próximas Atividades</h3>
<Container
disableGutters
sx={{ display: 'flex', justifyContent: 'row' }}
>
<img src={jitsiLogo} alt="Jitsi Meet" />
<h3 style={{ fontWeight: 500 }}>Jitsi</h3>
</Container>
<Button
variant="contained"
href="https://google.com"
target="__blank"
>
Entrar
</Button>
</Stack>
</Card>
<Card
sx={{ width: '100%', padding: '20px' }}
elevation={4}
variant="elevation"
>
<Stack justifyContent="flex-start" spacing={1}>
<h3 style={{ fontWeight: 500 }}>Próximas Atividades</h3>
{announcementsTabData.upcomingAssignments.map(ua => (
<Link sx={{ fontSize: '15px' }} key={ua.id}>
{ua.title}
@ -225,7 +288,7 @@ function View({
))}
</Stack>
</Card>
</Container>
</Stack>
<Stack
sx={{ width: '100%' }}
alignItems="center"