Video-09-Create-Product Details-Page

Megamigi · Jul 3, 2021 · d2667d1 · d2667d1
1 parent 692ff93
commit d2667d1
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -31,4 +31,10 @@ Build ECommerce Website Like Amazon by Next.js
 8. Route Product Details Page
    1. Make Product cards linkable
    2. Create /product/[slug] route
-   3. find product based on slug
+   3. find product based on slug
+9. Create Product Details Page
+   1. Create 3 columns
+   2. show image in first column
+   3. show product info in second column
+   4. show add to cart action on third column
+   5. add styles
diff --git a/components/Layout.js b/components/Layout.js
@@ -10,12 +10,13 @@ import {
 } from '@material-ui/core';
 import useStyles from '../utils/styles';
 
-export default function Layout({ children }) {
+export default function Layout({ title, description, children }) {
   const classes = useStyles();
   return (
     <div>
       <Head>
-        <title>Next Amazona</title>
+        <title>{title ? `${title} - Next Amazona` : 'Next Amazona'}</title>
+        {description && <meta name="description" content={description}></meta>}
       </Head>
       <AppBar position="static" className={classes.navbar}>
         <Toolbar>

diff --git a/pages/product/[slug].js b/pages/product/[slug].js
@@ -1,17 +1,102 @@
 import React from 'react';
+import NextLink from 'next/link';
+import Image from 'next/image';
+import {
+  Grid,
+  Link,
+  List,
+  ListItem,
+  Typography,
+  Card,
+  Button,
+} from '@material-ui/core';
 import { useRouter } from 'next/router';
 import data from '../../utils/data';
+import Layout from '../../components/Layout';
+import useStyles from '../../utils/styles';
 
 export default function ProductScreen() {
+  const classes = useStyles();
   const router = useRouter();
   const { slug } = router.query;
   const product = data.products.find((a) => a.slug === slug);
   if (!product) {
     return <div>Product Not Found</div>;
   }
   return (
-    <div>
-      <h1>{product.name}</h1>
-    </div>
+    <Layout title={product.name} description={product.description}>
+      <div className={classes.section}>
+        <NextLink href="/" passHref>
+          <Link>
+            <Typography>back to products</Typography>
+          </Link>
+        </NextLink>
+      </div>
+      <Grid container spacing={1}>
+        <Grid item md={6} xs={12}>
+          <Image
+            src={product.image}
+            alt={product.name}
+            width={640}
+            height={640}
+            layout="responsive"
+          ></Image>
+        </Grid>
+        <Grid item md={3} xs={12}>
+          <List>
+            <ListItem>
+              <Typography component="h1">{product.name}</Typography>
+            </ListItem>
+            <ListItem>
+              <Typography>Category: {product.category}</Typography>
+            </ListItem>
+            <ListItem>
+              <Typography>Brand: {product.brand}</Typography>
+            </ListItem>
+            <ListItem>
+              <Typography>
+                Rating: {product.rating} stars ({product.numReviews} reviews)
+              </Typography>
+            </ListItem>
+            <ListItem>
+              <Typography> Description: {product.description}</Typography>
+            </ListItem>
+          </List>
+        </Grid>
+        <Grid item md={3} xs={12}>
+          <Card>
+            <List>
+              <ListItem>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Typography>Price</Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography>${product.price}</Typography>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem>
+                <Grid container>
+                  <Grid item xs={6}>
+                    <Typography>Status</Typography>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Typography>
+                      {product.countInStock > 0 ? 'In stock' : 'Unavailable'}
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </ListItem>
+              <ListItem>
+                <Button fullWidth variant="contained" color="primary">
+                  Add to cart
+                </Button>
+              </ListItem>
+            </List>
+          </Card>
+        </Grid>
+      </Grid>
+    </Layout>
   );
 }
diff --git a/utils/styles.js b/utils/styles.js
@@ -19,7 +19,12 @@ const useStyles = makeStyles({
     minHeight: '80vh',
   },
   footer: {
+    marginTop: 10,
     textAlign: 'center',
   },
+  section: {
+    marginTop: 10,
+    marginBottom: 10,
+  },
 });
 export default useStyles;