Merge branch 'master' of https://git.dilig.net/ntasicc/coffee

components/product-type/ProductType.jsx

@@ -0,0 +1,23 @@
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+
+const ProductType = ({ productType, handleProductTypeChange }) => {
+  return (
+    <>
+      <FormControl sx={{ width: '200px' }}>
+        <InputLabel id="product-type-label">Product Type</InputLabel>
+        <Select
+          label="Product Type"
+          labelId="product-type-label"
+          id="product-type-label"
+          value={productType}
+          onChange={handleProductTypeChange}
+        >
+          <MenuItem value="asc">Name - A-Z</MenuItem>
+          <MenuItem value="desc">Name - Z-A</MenuItem>
+        </Select>
+      </FormControl>
+    </>
+  );
+};
+
+export default ProductType;

components/products-hero/ProductsHero.jsx

@@ -1,6 +1,8 @@
-import { Container, Grid, Typography } from '@mui/material';
+import { Button, Container, Grid, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import Image from 'next/image';
 import ProductCard from '../product-card/ProductCard';
+import ProductType from '../product-type/ProductType';
 import Sort from '../sort/sort';
 
 const ProductsHero = () => {
@@ -16,7 +18,7 @@ const ProductsHero = () => {
       <Container
         sx={{
           width: '1273px',
-          height: '300px',
+          height: '350px',
           mt: 25,
         }}
       >
@@ -38,10 +40,11 @@ const ProductsHero = () => {
       </Container>
       <Box textAlign="center" width="100%">
         <Sort />
+        <ProductType />
       </Box>
       <Container
         sx={{
-          mt: 25,
+          mt: 10,
         }}
       >
         <Grid container spacing={2}>
@@ -73,6 +76,30 @@ const ProductsHero = () => {
             <ProductCard />
           </Grid>
         </Grid>
+        <Box textAlign="center" mt={-3} mb={5}>
+          <Button
+            startIcon={
+              <Image
+                src="/images/arrow.svg"
+                alt="arrow down"
+                width={29}
+                height={29}
+              />
+            }
+            sx={{
+              backgroundColor: 'primary.main',
+              height: 50,
+              width: 150,
+              color: 'white',
+              ':hover': {
+                bgcolor: 'primary.main', // theme.palette.primary.main
+                color: 'white',
+              },
+            }}
+          >
+            Load More
+          </Button>
+        </Box>
       </Container>
     </Box>
   );

components/sort/Sort.jsx

@@ -1,5 +1,26 @@
-const Sort = () => {
-  return <button>Sort</button>;
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+
+const Sort = ({ sort, handleSortChange }) => {
+  return (
+    <>
+      <FormControl sx={{ width: '200px', paddingRight: '15px' }}>
+        <InputLabel id="sort-label">Sort</InputLabel>
+        <Select
+          MenuProps={{
+            disableScrollLock: true,
+          }}
+          label="Sort"
+          labelId="sort-label"
+          id="sort-select-helper"
+          value={sort}
+          onChange={handleSortChange}
+        >
+          <MenuItem value="asc">Name - A-Z</MenuItem>
+          <MenuItem value="desc">Name - Z-A</MenuItem>
+        </Select>
+      </FormControl>
+    </>
+  );
 };
 
 export default Sort;

components/tab-panel/TabPanel.jsx

@@ -0,0 +1,22 @@
+import { Typography } from '@mui/material';
+import { Box } from '@mui/system';
+
+const TabPanel = ({ children, value, index, ...other }) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+};
+
+export default TabPanel;

pages/products/[slug].js

@@ -0,0 +1,119 @@
+import { Grid, Tab, Tabs, Typography } from '@mui/material';
+import { Box, Container } from '@mui/system';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import ProductCard from '../../components/product-card/ProductCard';
+import TabPanel from '../../components/tab-panel/TabPanel';
+
+const SingleProduct = () => {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Container
+        sx={{
+          width: '1273px',
+        }}
+      >
+        <Typography
+          fontFamily={'body1.fontFamily'}
+          fontSize="32px"
+          sx={{ mt: 25, height: '100%', color: 'primary.main' }}
+        >
+          Minimalist Printed Mug
+        </Typography>
+        <Grid container spacing={2} sx={{ height: '100%', width: '100%' }}>
+          <Grid item lg={6}>
+            <Image
+              src="/images/product-card-image.jpg"
+              alt="product"
+              width={630}
+              height={390}
+            />
+          </Grid>
+          <Grid item lg={6}>
+            <Tabs
+              sx={{
+                '& button:focus': {
+                  borderTop: '1px solid black',
+                  borderLeft: '1px solid black',
+                  borderRight: '1px solid black',
+                  borderRadius: '5px 5px 0 0',
+                  borderBottom: 'none',
+                },
+              }}
+              value={value}
+              onChange={handleChange}
+              aria-label="basic tabs example"
+            >
+              <Tab
+                sx={{
+                  width: '50%',
+                }}
+                label="Purchase"
+                {...a11yProps(0)}
+              />
+              <Tab sx={{ width: '50%' }} label="Category" {...a11yProps(1)} />
+            </Tabs>
+            <TabPanel value={value} index={0}>
+              <Box display="flex" flexDirection="row" justifyContent="right">
+                <Box>
+                  <Typography>
+                    Our simple and sturdy mugs are made to last. With a
+                    minimalist desings you will soon be enjoying your next brew.
+                  </Typography>
+                </Box>
+                <Box
+                  justifyContent="flex-end"
+                  sx={{ display: 'flex', flexDirection: 'column' }}
+                >
+                  <Typography align="right">$20</Typography>
+                </Box>
+              </Box>
+            </TabPanel>
+            <TabPanel value={value} index={1}>
+              Mugs & Cups
+            </TabPanel>
+          </Grid>
+        </Grid>
+
+        <Typography
+          sx={{ mt: 25, mb: 5, color: 'primary.main', fontSize: '32px' }}
+        >
+          Other Product You May Like
+        </Typography>
+        <Grid container spacing={2} sx={{ height: '100%', width: '100%' }}>
+          <Grid item lg={4}>
+            <ProductCard />
+          </Grid>
+          <Grid item lg={4}>
+            <ProductCard />
+          </Grid>
+          <Grid item lg={4}>
+            <ProductCard />
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default SingleProduct;

public/images/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12L15 18L9 12" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>