2.0 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps

Giao diện chi tiết đơn giản :)))

523KB

pro.zip

archive

£

http://localhost:3000/car/Honda/Civic/21localhost

C:\Users\Administrator\Desktop\pro\pages\car\[make]\[brand]\[id].tsx

import { Paper, Grid, Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import React from 'react';
import CarModel from '../../../../interface/Car';
const useStyles = makeStyles({
  root: {
    maxWidth: 850,
    marginRight: 'auto',
    marginLeft: 'auto',
    marginTop: 15
  },
});
export default function CarDetails() {
  const classes = useStyles();
  return (
    <Paper className={classes.root} elevation={3}>
      <Grid container spacing={2}>
        <Grid item xs={7}>
          <img width="100%" src="http://localhost:3000/photos/cars/volkswagen-tiguan-2007-14299.jpg" alt="volkswagen"/>
        </Grid>
        <Grid item xs={5}>
          <Typography variant="h5">Volkswagen Tiguan</Typography>
          <Typography variant="h6">$12345656</Typography>
          <Typography variant="body1">Year: 2018</Typography>
          <Typography variant="body1">Kms: 456</Typography>
          <Typography variant="body1">Type: Pertrol</Typography>
          <Typography variant="body1">Detail: Lorem ipsum dolor sit amet</Typography>
        </Grid>
      </Grid>
    </Paper>
  )
}