Skip to content
This repository was archived by the owner on Jun 12, 2025. It is now read-only.

Commit 2a08b6d

Browse files
tnfAngeltnfAngel
committed
classscreen
1 parent c00bd00 commit 2a08b6d

2 files changed

Lines changed: 232 additions & 16 deletions

File tree

‎src/components/screens/ClassScreen.tsx‎

Lines changed: 222 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,227 @@
11
'use client';
22

3-
import { Text } from '@chakra-ui/react';
3+
import { classrooms } from '@/mocks/classrooms';
4+
import {
5+
Avatar,
6+
Box,
7+
Button,
8+
Container,
9+
Flex,
10+
Grid,
11+
Heading,
12+
Icon,
13+
Image,
14+
Stack,
15+
Tab,
16+
TabList,
17+
TabPanel,
18+
TabPanels,
19+
Tabs,
20+
Text,
21+
VStack
22+
} from '@chakra-ui/react';
23+
import { FiCode, FiFileText, FiUsers } from 'react-icons/fi';
424

525
export default function ClassScreen({ id }: Readonly<{ id: string }>) {
6-
return (
7-
<Text fontSize='lg' color='gray.400'>
8-
ID de clase: {id}
9-
</Text>
10-
);
26+
const classroom = classrooms.find((c) => c.id === id);
27+
28+
if (!classroom && typeof location !== 'undefined') location.href = '/';
29+
30+
return classroom ? (
31+
<Box as='main' className='animate-fade-in'>
32+
<Box bg='brand.dark.900' py={12} position='relative' overflow='hidden'>
33+
<Box position='absolute' top={0} left={0} right={0} height='200px' opacity={0.3} filter='blur(8px)'>
34+
<Image
35+
src={`https://evogd-cdn.tnfangel.com/thumbnails/thumbnail-${classroom.thumbnailId}.jpg`}
36+
alt={classroom.name}
37+
width='100%'
38+
height='100%'
39+
objectFit='cover'
40+
objectPosition='center'
41+
/>
42+
<Box
43+
position='absolute'
44+
bottom={0}
45+
left={0}
46+
right={0}
47+
height='100%'
48+
bgGradient='linear(to-t, brand.dark.900 10%, transparent)'
49+
/>
50+
</Box>
51+
52+
<Container maxW='container.xl' position='relative'>
53+
<Grid
54+
templateColumns={{ base: '1fr', md: '1fr auto' }}
55+
gap={{ base: 6, md: 12 }}
56+
alignItems='center'
57+
>
58+
<Stack spacing={6}>
59+
<Heading
60+
as='h1'
61+
size='xl'
62+
bgGradient='linear(to-r, white, brand.primary.400)'
63+
bgClip='text'
64+
>
65+
{classroom.name}
66+
</Heading>
67+
<Text fontSize='lg' color='gray.400'>
68+
{classroom.description || 'Sin descripción.'}
69+
</Text>
70+
<Flex gap={6} color='gray.400'>
71+
<Flex align='center' gap={2}>
72+
<Icon as={FiUsers} />
73+
<Text>24 estudiantes</Text>
74+
</Flex>
75+
<Flex align='center' gap={2}>
76+
<Icon as={FiCode} />
77+
<Text>Código: {classroom.code}</Text>
78+
</Flex>
79+
</Flex>
80+
</Stack>
81+
82+
<VStack spacing={2} align='center'>
83+
<Avatar
84+
size='xl'
85+
name={classroom.owner}
86+
src='https://avatars.githubusercontent.com/u/57068341?v=4'
87+
/>
88+
<Text color='gray.400'>Ángel</Text>
89+
</VStack>
90+
</Grid>
91+
</Container>
92+
</Box>
93+
94+
<Box>
95+
<Container maxW='container.xl'>
96+
<Tabs variant='unstyled'>
97+
<Box borderBottom='1px solid' borderColor='brand.dark.800'>
98+
<TabList gap={4}>
99+
<Tab
100+
py={4}
101+
color='gray.400'
102+
_selected={{
103+
color: 'brand.primary.400',
104+
borderBottom: '2px solid',
105+
borderColor: 'brand.primary.400'
106+
}}
107+
_hover={{ color: 'brand.primary.400' }}
108+
>
109+
<Flex align='center' gap={2}>
110+
<FiFileText />
111+
<Text>Actividades</Text>
112+
</Flex>
113+
</Tab>
114+
<Tab
115+
py={4}
116+
color='gray.400'
117+
_selected={{
118+
color: 'brand.primary.400',
119+
borderBottom: '2px solid',
120+
borderColor: 'brand.primary.400'
121+
}}
122+
_hover={{ color: 'brand.primary.400' }}
123+
>
124+
<Flex align='center' gap={2}>
125+
<FiUsers />
126+
<Text>Estudiantes</Text>
127+
</Flex>
128+
</Tab>
129+
</TabList>
130+
</Box>
131+
132+
<Box py={8}>
133+
<TabPanels>
134+
<TabPanel p={0}>
135+
<VStack spacing={8} align='stretch'>
136+
<Box>
137+
<Heading size='lg' mb={6}>
138+
Actividades
139+
</Heading>
140+
<Flex
141+
direction='column'
142+
align='center'
143+
justify='center'
144+
py={16}
145+
gap={4}
146+
bg='brand.dark.900'
147+
borderRadius='xl'
148+
border='1px dashed'
149+
borderColor='brand.dark.700'
150+
>
151+
<Text fontSize='lg' color='gray.400'>
152+
No hay actividades disponibles
153+
</Text>
154+
<Button variant='outline'>Crear actividad</Button>
155+
</Flex>
156+
</Box>
157+
</VStack>
158+
</TabPanel>
159+
160+
<TabPanel p={0}>
161+
<VStack spacing={8} align='stretch'>
162+
<Box>
163+
<Heading size='lg' mb={6}>
164+
Estudiantes
165+
</Heading>
166+
<Grid
167+
templateColumns={{
168+
base: '1fr',
169+
sm: 'repeat(2, 1fr)',
170+
md: 'repeat(3, 1fr)'
171+
}}
172+
gap={4}
173+
>
174+
<Flex
175+
p={4}
176+
gap={4}
177+
align='center'
178+
bg='brand.dark.900'
179+
borderRadius='xl'
180+
border='1px solid'
181+
borderColor='brand.dark.800'
182+
>
183+
<Avatar
184+
size='md'
185+
name='Ángel'
186+
src='https://avatars.githubusercontent.com/u/57068341?v=4'
187+
/>
188+
<Box>
189+
<Text fontWeight='bold'>Ángel</Text>
190+
<Text fontSize='sm' color='brand.primary.400'>
191+
Profesor
192+
</Text>
193+
</Box>
194+
</Flex>
195+
196+
{Array.from({ length: 5 }).map((_, i) => (
197+
<Flex
198+
key={i}
199+
p={4}
200+
gap={4}
201+
align='center'
202+
bg='brand.dark.900'
203+
borderRadius='xl'
204+
border='1px solid'
205+
borderColor='brand.dark.800'
206+
>
207+
<Avatar size='md' name={`Estudiante ${i + 1}`} />
208+
<Box>
209+
<Text fontWeight='bold'>Estudiante {i + 1}</Text>
210+
<Text fontSize='sm' color='gray.400'>
211+
Estudiante
212+
</Text>
213+
</Box>
214+
</Flex>
215+
))}
216+
</Grid>
217+
</Box>
218+
</VStack>
219+
</TabPanel>
220+
</TabPanels>
221+
</Box>
222+
</Tabs>
223+
</Container>
224+
</Box>
225+
</Box>
226+
) : null;
11227
}

‎src/mocks/classrooms.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,64 +13,64 @@ export const classrooms: IClassroomCard[] = [
1313
id: '2',
1414
name: 'Clase de prueba 2',
1515
thumbnailId: 2,
16-
owner: '1',
17-
description: 'Esto es una clase de prueba',
16+
owner: '2',
17+
description: 'Esto es una clase de prueba 2',
1818
code: '123456'
1919
},
2020
{
2121
id: '3',
2222
name: 'Clase de prueba 3',
2323
thumbnailId: 3,
2424
owner: '1',
25-
description: 'Esto es una clase de prueba',
25+
description: 'Esto es una clase de prueba 3',
2626
code: '123456'
2727
},
2828
{
2929
id: '4',
3030
name: 'Clase de prueba 4',
3131
thumbnailId: 4,
3232
owner: '1',
33-
description: 'Esto es una clase de prueba',
33+
description: 'Esto es una clase de prueba 4',
3434
code: '123456'
3535
},
3636
{
3737
id: '5',
38-
name: 'Clase de prueba 2',
38+
name: 'Clase de prueba 5',
3939
thumbnailId: 5,
4040
owner: '1',
41-
description: 'Esto es una clase de prueba',
41+
description: 'Esto es una clase de prueba 5',
4242
code: '123456'
4343
},
4444
{
4545
id: '6',
4646
name: 'Clase de prueba 6',
4747
thumbnailId: 6,
4848
owner: '1',
49-
description: 'Esto es una clase de prueba',
49+
description: 'Esto es una clase de prueba 6',
5050
code: '123456'
5151
},
5252
{
5353
id: '7',
5454
name: 'Clase de prueba 7',
5555
thumbnailId: 7,
5656
owner: '1',
57-
description: 'Esto es una clase de prueba',
57+
description: 'Esto es una clase de prueba 7',
5858
code: '123456'
5959
},
6060
{
6161
id: '8',
6262
name: 'Clase de prueba 8',
6363
thumbnailId: 8,
6464
owner: '1',
65-
description: 'Esto es una clase de prueba',
65+
description: 'Esto es una clase de prueba 8',
6666
code: '123456'
6767
},
6868
{
6969
id: '9',
7070
name: 'Clase de prueba 9',
7171
thumbnailId: 9,
7272
owner: '1',
73-
description: 'Esto es una clase de prueba',
73+
description: 'Esto es una clase de prueba 9',
7474
code: '123456'
7575
}
7676
];

0 commit comments

Comments
 (0)