Guía 12

Guía 12

DAWM / Proyecto03

Actividades en clases

Componente Indicador

  1. Cree el archivo src/components/Indicator.tsx con el componente Fragment:

     export default function Indicator() {
     return (
        	<>
             Indicator
         </> 
     )
 }

  2. En App.tsx importe el componente Indicator y use en el contenido a renderizar:

     import Indicator from './components/Indicator';

 function App() {
 	return (
 		...
 		<Grid xs={6} md={4} lg={2}>
 	        <Indicator />
 	    </Grid>       
 		...
 	)
 }

 export default App

  3. (STOP 1) Compruebe el resultado en el navegador.

Props

  1. Agregue la interfaz Config al componente Indicator

     ...
 interface Config {
     title?: String;
     subtitle?: String;
     value: Number;
 }

 export default function Indicator(config: Config) {
 	return (
         <>
             {config.title}<br/>
             {config.value.toString()}<br/>
             {config.subtitle}
                
         </>
     )
 }

  2. En App.tsx, agregue las propiedades y los valores del componente Indicator

     import Indicator from './components/Indicator';

 function App() {
 	return (
 		...
 		<Grid xs={6} md={4} lg={2}>
 	        <Indicator title='Precipitación' subtitle='Probabilidad' value={0.13} />
 	    </Grid>       
 		...
 	)
 }

 export default App

  3. (STOP 2) Compruebe el resultado en el navegador.

Componente MUI Paper y Typography

  1. En Indicator.tsx, agregue la referencia a los componentes Typography y Paper

     import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';

  2. Use los componentes Typography y Paper

     ...

 export default function Indicator(config: Config) {
     return (
         <Paper
             sx={{
               p: 2,
               display: 'flex',
               flexDirection: 'column'
             }}
           >
             <Typography component="h2" variant="h6" color="primary" gutterBottom>
                 {config.title} 
             </Typography>
             <Typography component="p" variant="h4">
                 {config.value.toString()}
             </Typography>
             <Typography color="text.secondary" sx={{ flex: 1 }}>
                 {config.subtitle}
             </Typography>
         </Paper> 
     )
 }

  3. (STOP 3) Compruebe el resultado en el navegador.

Componente MUI Card

  1. Descargue la imagen sunrise.jpeg dentro de la carpeta assets dentro del proyecto.

  2. Cree el componente src/components/Summary.tsx, importe y use los componentes Card y los componentes relacionados:

     import Typography from '@mui/material/Typography';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import { CardActionArea } from '@mui/material';

 import sunrise from '../assets/sunrise.jpeg'

 export default function Summary() {
     return (
         <Card sx={{ maxWidth: 345 }}>
             <CardActionArea>
                 <CardMedia
                     component="img"
                     height="140"
                     image={sunrise}
                     alt="Amanecer"
                 />
                 <CardContent>
                     <Typography gutterBottom component="h2" variant="h6" color="primary">
                         Amanecer
                     </Typography>
                     <Typography component="p" variant="h4">
                         05:19:08
                     </Typography>
                     <Typography color="text.secondary" sx={{ flex: 1 }}>
                     	en 17 Junio, 2024
                     </Typography>
                 </CardContent>
             </CardActionArea>
         </Card>
     )
 }

  3. En App.tsx, importe el componente Summary y use en el contenido a renderizar:

     import Summary from './components/Summary';

 function App() {
 	return (
 		...
 		<Grid xs={6} sm={4} md={3} lg={2}>
 	        <Summary></Summary>
 	    </Grid>        
 		...
 	)
 }

 export default App
  4. (STOP 4) Compruebe el resultado en el navegador.

Componente MUI Table

  1. Cree el componente src/components/BasicTable.tsx
    • Del ejemplo Basic Table muestre y copie el código en el componente recién creado.
    • En App.tsx, importe el componente BasicTable y use en el contenido a renderizar:
     import BasicTable from './components/BasicTable';

 function App() {
 	return (
 		...
 		<Grid xs={12} md={6} lg={9} >
 	       <BasicTable />
 	    </Grid>        
 		...
 	)
 }

 export default App
  2. (STOP 5) Compruebe el resultado en el navegador.
  3. Versiona local y remotamente el repositorio dashboard.
  4. Despliega la aplicación dashboard.

Documentación

Fundamental

Términos

component, interface, props

Referencias