Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3506 | Rev 3510 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3506 Rev 3508
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React from 'react';
2 
import { useParams } from 'react-router-dom';
 2 
import { useParams } from 'react-router-dom';
3 
import { Button, styled, Tab, Tabs } from '@mui/material';
 3 
import { Button, styled, Typography } from '@mui/material';
Línea 4... Línea 4...
4 
 
 4 
 
Línea 5... Línea 5...
5 
import { useCapsule } from '@microlearning/hooks';
 5 
import { useCapsule } from '@microlearning/hooks';
- 
 
 6 
 
6 
 
 7 
import { Card, CardContent, CommentForm, CommentsList, Spinner } from '@shared/components';
Línea 7... Línea 8...
7 
import { CommentForm, CommentsList, Spinner } from '@shared/components';
 8 
 
8 
import { CapsuleDetails } from '@microlearning/components';
 9 
import { parse } from '@utils';
9 
 
 10 
 
10 
const Picture = styled('img')`
 11 
const Picture = styled('img')`
11 
  width: 100%;
 12 
  width: 100%;
- 
 
 13 
  height: 250px;
12 
  height: 250px;
 14 
  border-radius: 10px;
13 
  border-radius: 10px;
 15 
  background-color: #0009;
Línea 14... Línea 16...
14 
  background-color: #858585;
 16 
  object-fit: contain;
15 
  margin-bottom: 1rem;
 - 
 
16 
`;
 17 
  margin-bottom: 1rem;
Línea 17... Línea 18...
17 
 
 18 
`;
Línea 18... Línea 19...
18 
export function CapsulePage() {
 19 
 
Línea 33... Línea 34...
33 
    capsule?.total_slides === 1 && capsule?.type_first_slide === 'video'
 34 
    capsule?.total_slides === 1 && capsule?.type_first_slide === 'video'
34 
      ? getSlides()
 35 
      ? getSlides()
35 
      : navigate('slides');
 36 
      : navigate('slides');
36 
  }; */
 37 
  }; */
Línea 37... Línea -...
37 
 
 - 
 
38 
  const handleChange = (event, newValue) => {
 - 
 
39 
    setSection(newValue);
 - 
 
40 
  };
 - 
 
41 
 
 38 
 
Línea 42... Línea 39...
42 
  if (loading || !capsule) return <Spinner />;
 39 
  if (loading || !capsule) return <Spinner />;
43 
 
 40 
 
44 
  return (
 41 
  return (
Línea 45... Línea 42...
45 
    <>
 42 
    <>
46 
      <Picture src={capsule.image} alt={`${capsule.name} capsule`} />
 43 
      <Picture src={capsule.image} alt={`${capsule.name} capsule`} />
47 
 
 44 
 
48 
      <Tabs value={section} onChange={handleChange}>
 45 
      <Card>
49 
        <Tab label='Información' value='details' />
 46 
        <CardContent>
50 
        <Tab label='Contenido' value='comments' />
 - 
 
51 
        <Tab label='Contenido' value='comment' />
 - 
 
52 
      </Tabs>
 - 
 
53 
 
 47 
          <Typography variant='h1'>{capsule.name}</Typography>
54 
      {section === 'details' && <CapsuleDetails description={capsule.description} />}
 - 
 
55 
 
 48 
          <Typography>{parse(capsule.description)}</Typography>
- 
 
 49 
          <CommentForm />
Línea 56... Línea 50...
56 
      {section === 'comments' && <CommentsList comments={[]} />}
 50 
          <CommentsList />
57 
 
 51 
        </CardContent>
58 
      {section === 'comment' && <CommentForm />}
 52 
      </Card>
59 
 
 53