new tag

src/components/ProductList/ProductList.jsx

@@ -77,9 +77,9 @@ const ProductList = ({ size = 99999 }) => {
         (product) => product.productType === productType
       );
 
-      setTimeout(()=>{
+      setTimeout(() => {
         setFilteredProducts(newFilteredProducts)
-      },100)
+      }, 100)
 
       const tagList = getAllTags(newFilteredProducts);
       setTagFilterOption(tagList);
@@ -144,11 +144,11 @@ const ProductList = ({ size = 99999 }) => {
         newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
       }
 
-      
+
       setFilteredProducts([]) //cause I want those fadeIn animation
-      setTimeout(()=>{
+      setTimeout(() => {
         setFilteredProducts(newFilteredProducts)
-      },100)
+      }, 100)
 
     }
 
@@ -158,12 +158,12 @@ const ProductList = ({ size = 99999 }) => {
     //setInput({ ...input, [event.target.name]: event.target.value });
   };
 
-  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
+  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc, selected = false) => {
 
     return (
       <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
 
-        <a href={`/products/${handle}`} style={{textDecoration:"none",color:"#000"}}>
+        <a href={`/products/${handle}`} style={{ textDecoration: "none", color: "#000" }}>
           <Box
             sx={{
               overflow: 'hidden',
@@ -183,15 +183,15 @@ const ProductList = ({ size = 99999 }) => {
               }}
             />
 
-            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
-            NEW
-          </Button> */}
+            {(selected) && <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+              NEW
+            </Button>}
 
             <Box sx={{ pb: 5, pt: 3, width: "80%" }}>
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
                 {collection_name}
               </Typography>
-              <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
+              <Typography variant="h6" sx={{ fontWeight: "bolder", mb: 1 }}>
                 {title}
               </Typography>
               <Typography variant="body1" sx={{ fontWeight: "400" }}>
@@ -313,18 +313,17 @@ const ProductList = ({ size = 99999 }) => {
         <Grid container spacing={0.5} columns={12}>
           {filteredProducts.map((product, index) => {
 
-            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
+            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants, selected } = product
 
             let minPrice = minVariantPrice.amount
             let minPriceCurrency = minVariantPrice.currencyCode
             let maxPrice = maxVariantPrice.amount
             let maxPriceCurrency = maxVariantPrice.currencyCode
-
-            let img_url = images[0].url
+            let img_url = images[0]?.url
             let collection_name = collections[0]?.title
 
             if (index < size) {
-              return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")
+              return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "", selected)
             }
 
           })}

src/components/ProductSelected/ProductSelected.jsx

@@ -67,15 +67,15 @@ const ProductSelected = () => {
               }}
             />
 
-            {/* <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+            <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
             NEW
-          </Button> */}
+          </Button>
 
             <Box sx={{ pb: 5, pt: 3 }}>
               <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
                 {collection_name}
               </Typography>
-              <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
+              <Typography variant="h6" sx={{ fontWeight: "bolder", mb: 1 }}>
                 {title}
               </Typography>
               <Typography variant="body1" sx={{ fontWeight: "400" }}>