Merge pull request #46 from KieIO/m6-quangnhanupdate

M6 quangnhanupdate edit tag img to ImageWithLink

pages/test.tsx

@@ -82,9 +82,17 @@ export default function Test() {
       
       {/* <RecipeListPage/> */}
         {/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
-        <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
-           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/> 
+        {/* <button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
+           <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/>  */}
            {/* <CartDrawer  /> */}
+           <div className="shape-common-lg">
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit maiores aut, delectus assumenda explicabo, dolore facilis, quasi quae sed obcaecati doloribus dolorum architecto aperiam nisi dignissimos consequuntur amet neque possimus.
+           </div>
+           <div className="shape-common-lg-border">
+              <div className="inner">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, porro aut. Quas, consequuntur! Officiis magni cum placeat magnam ut hic beatae error facere obcaecati. Labore eius explicabo fugit minus veritatis.
+              </div>
+           </div>
     </>
   )
 }

src/components/common/Author/Author.module.scss

@@ -2,11 +2,15 @@
 .authorWarper{
     @apply flex flex-row items-center;
     
-    .authorImage{
+    .authorImage {
         width:3.2rem;
         height:3.2rem;
         border-radius:3.2rem;
+        div{
+            min-width:3.2rem !important; 
         }
+    }
+    
     .authorName{
         margin-left:1rem;
         color:var(--text-label);

src/components/common/Author/Author.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import s from './Author.module.scss';
 import classNames from 'classnames';
+import ImgWithLink from "../ImgWithLink/ImgWithLink";
 
 interface Props {
     image:string,
@@ -11,7 +12,9 @@ const Author = ({image,name}:Props) =>{
 
     return (
         <div className={classNames(s.authorWarper)}>
-            <img className={classNames(s.authorImage)}  src={image}  alt=""/>
+            <div className={classNames(s.authorImage)}  >
+                <ImgWithLink src={image} alt="author" />
+            </div>
             <div className={classNames(s.authorName)}>{name}</div>
         </div>
     )

src/components/modules/blog-detail/BlogContent/BlogContent.module.scss

@@ -31,12 +31,13 @@
         padding: 2rem 0;
     }
     .content{
-        
-
-       
-        img{
+        figure{
+            div{
                 width: 100%;
                 border-radius: 2.4rem;
+                min-height: 45.2rem;
+                object-fit: cover;
+            }
         }
     }
     .boxShare{

src/components/modules/blog-detail/BlogContent/BlogContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Author, DateTime } from "src/components/common";
+import { Author, DateTime, ImgWithLink } from "src/components/common";
 import IconFacebook from 'src/components/icons/IconFacebook';
 import IconInstagram from 'src/components/icons/IconInstagram';
 import IconTwitter from 'src/components/icons/IconTwitter';
@@ -55,7 +55,10 @@ const BlogContent = ({}:BlogContentProps) => {
                     You can eat broccoli stems. In fact, they are delicious. Just use a peeler to peel off the outsides and then trim the stalks into small 1/4”-1/2” cubes.
                     </p>
                     <br/>
-                    <img  src="https://cdn.pastaxi-manager.onepas.vn/content/uploads/articles/An-%C4%91%E1%BA%B7c%20s%E1%BA%A3n%20v%C3%B9ng%20mi%E1%BB%81n/An-2-21%20%C4%91%E1%BA%B7c%20s%E1%BA%A3n%20SG%20ngon%20n%E1%BB%95i%20ti%E1%BA%BFng/tong-hop-21-dac-san-sai-gon-ngon-noi-tieng-khong-an-that-co-loi-2.jpg" alt="blog-detail" />
+
+                    <figure>
+                        <ImgWithLink src="https://user-images.githubusercontent.com/89437339/133046625-bdf9cc0d-6f22-43e5-a49d-d4d34df19cf2.jpg"  alt="blog-detail" />
+                    </figure>
                   
                 </section>
                   

src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.module.scss

@@ -3,10 +3,14 @@
     padding-bottom: 3.2rem;
 }
 .image{
+    div{
         width: 100%;
         padding: 0 2rem;
         margin-bottom: 2rem;
         border-radius: 2.4rem;
+        min-height: 45.2rem;
+    }
+   
     @screen md {
         width: 90%;
         margin:0 auto;

src/components/modules/blog-detail/BlogDetailImg/BlogDetailImg.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import { ImgWithLink } from 'src/components/common';
 import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
 import s from './BlogDetailImg.module.scss';
 interface Props {
@@ -19,7 +20,9 @@ const BlogDetailImg = ({}:Props ) => {
             <div className={s.beadcrumb}>
                 <BreadcrumbCommon crumbs={CRUMBS} />
             </div>
-             <img className={s.image} src="https://i.pinimg.com/564x/3d/42/94/3d429429428377070c4f91844a8d8755.jpg" alt="Ảnh đại diện" />
+            <div className={s.image}>
+                <ImgWithLink src="https://user-images.githubusercontent.com/89437339/133044532-8b5f9442-841b-4187-84b4-d6cc66676b52.png" alt="Ảnh đại diện"/>
+            </div>
         </>
     )
 }

src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss

@@ -11,12 +11,13 @@
     .recipesItemImage {
         @apply transition-all duration-200;
         width: 31%;
-        img {
-            @apply block object-cover;
-            width: 100%;
-            min-height: 12.5rem;
+        a{
+            div{
+                @apply object-cover;
+                min-height: 19.6rem;
                 border-radius: 1.5rem;
             }
+        }
 
         @screen md {
             @apply object-cover cursor-pointer;

src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import React from 'react';
+import { ImgWithLink } from 'src/components/common';
 import s from './RecipesItem.module.scss';
 interface RecipesItem {
     image:string,
@@ -14,7 +15,7 @@ const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
             <div className={s.recipesItemImage}>
                 <Link href={link}>
                     <a>
-                        <img src={image} />
+                        <ImgWithLink src={image} alt="author" />
                     </a>
                 </Link>
             </div>