Merge pull request #50 from bodrovphone/zadelis-components

refactor with next/img
bodrovphone · Jun 17, 2021 · f6b95da · f6b95da · vercel · Jun 17, 2021
2 parents 6c87c6c + 1306e55
commit f6b95da
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 41 deletions.
diff --git a/components/aboutZadelis/index.js b/components/aboutZadelis/index.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { About_ST, Content_ST, Social_ST } from "./styles";
 import Logo from "../logo";
+import Image from "next/image";
 
 const AboutZadelis = () => (
   <About_ST>
@@ -21,29 +22,38 @@ const AboutZadelis = () => (
         rel="external"
         href="https://www.instagram.com/explore/tags/zadelis/"
       >
-        <img
-          src="../img/instagram-logo.png"
+        <Image
+          src="/img/instagram-logo.png"
           alt="Facebook Logo"
+          className="image"
+          width={42}
+          height={42}
         />
       </a>
       <a
         target="_blank"
         rel="external"
         href="https://www.facebook.com/hashtag/zadelis"
       >
-        <img
-          src="../img/facebook-logo.png"
+        <Image
+          src="/img/facebook-logo.png"
           alt="Instagram Logo"
+          className="image"
+          width={42}
+          height={42}
         />
       </a>
       <a
         target="_blank"
         rel="external"
         href="https://twitter.com/hashtag/zadelis"
       >
-        <img
-          src="../img/twitter-logo.png"
+        <Image
+          src="/img/twitter-logo.png"
           alt="Twitter Logo"
+          className="image"
+          width={42}
+          height={42}
         />
       </a>
     </Social_ST>

diff --git a/components/aboutZadelis/styles/index.js b/components/aboutZadelis/styles/index.js
@@ -21,10 +21,7 @@ export const Social_ST = styled.div`
   margin: 20px auto;
   text-align: center;
 
-  img {
-    width: 48px;
-    height: 48px;
-    background-color: transparent;
-    margin-left: 10px;
+  a {
+    margin-right: 10px;
   }
 `;
diff --git a/components/blog/index.js b/components/blog/index.js
@@ -24,11 +24,10 @@ const Recommendations = (recommended) => {
 
 const Blog = ({ data }) =>
   data.blocks.map(({ text, image, recommended }, index) => (
-    <ST.Blog>
+    <ST.Blog key={index}>
       {ReactHtmlParser(text)}
       {image && (
         <Image
-          key={index}
           src={image}
           alt="Picture of money"
           width={650}

diff --git a/components/categoriesWidget/index.js b/components/categoriesWidget/index.js
@@ -9,8 +9,8 @@ const CategoriesWidget = ({ categories }) => (
       {categories.map((cat, index) => (
         <Image_ST key={index}>
           <GifPlayer
-            gif={`img/categories/${cat}.gif`}
-            still={`img/categories/${cat}.png`}
+            gif={`/img/categories/${cat}.gif`}
+            still={`/img/categories/${cat}.png`}
           />
           <span>{translate[cat]["ru"]}</span>
         </Image_ST>

diff --git a/components/footer/index.js b/components/footer/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import { Footer_ST, Grid_ST, GridBlock_ST, GridItem_ST } from "./styles";
 import GridItem from "./gridItem";
 import { Envelope } from "react-bootstrap-icons";
+import Image from "next/image";
 
 const Footer = () => (
   <Footer_ST>
@@ -36,10 +37,20 @@ const Footer = () => (
               <Envelope size={32} color="black" />
             </a>
             <a href="viber://add?number=12345678">
-              <img src="img/viber-logo.svg" />
+              <Image
+                src="/img/viber-logo.svg"
+                alt="Picture of viber messanger"
+                width={32}
+                height={32}
+              />
             </a>
             <a href="https://telegram.me/YourUsernameHere">
-              <img src="img/telegram-logo.svg" />
+              <Image
+                src="/img/telegram-logo.svg"
+                alt="Picture of viber messanger"
+                width={32}
+                height={32}
+              />
             </a>
           </div>
         </address>

diff --git a/components/getSocial/index.js b/components/getSocial/index.js
@@ -1,12 +1,36 @@
-import React from 'react';
-import { Wrapper } from './styles';
+import React from "react";
+import { Wrapper } from "./styles";
+import Image from "next/image";
 
 const GetSocial = (props) => (
   <Wrapper>
-    <img src="../img/getSocial/getSocial-bycicle.jpg" />
-    <img src="../img/getSocial/getSocial-worker.jpg" />
-    <img src="../img/getSocial/getSocial-kayak.jpg" />
-    <img src="../img/getSocial/getSocial-suit.jpg" />
+    <Image
+      src="/img/getSocial/getSocial-bycicle.jpg"
+      alt="picture of bycicle"
+      width="100%"
+      height="100%"
+      layout="responsive"
+    />
+    <Image
+      src="/img/getSocial/getSocial-worker.jpg"
+      alt="picture of bycicle"
+      width="100%"
+      height="100%"
+    />
+    <Image
+      src="/img/getSocial/getSocial-kayak.jpg"
+      alt="picture of bycicle"
+      width="100%"
+      height="100%"
+      layout="responsive"
+    />
+    <Image
+      src="/img/getSocial/getSocial-suit.jpg"
+      alt="picture of bycicle"
+      width="100%"
+      height="100%"
+      layout="responsive"
+    />
   </Wrapper>
 );
 

diff --git a/components/getSocial/styles/index.js b/components/getSocial/styles/index.js
@@ -4,18 +4,21 @@ import { device } from "../../styles/media";
 export const Wrapper = styled.div`
   width: 100%;
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
+
   flex-wrap: wrap;
+  gap: 10px;
 
-  img {
+  & > div {
     width: 45%;
-    margin: 10px 0;
     height: auto;
     max-height: 180px;
   }
 
   @media ${device.mobileXL} {
-    img {
+    justify-content: space-around;
+
+    & > div {
       width: 23%;
     }
   }

diff --git a/components/gifPlayer/gifPlayer.js b/components/gifPlayer/gifPlayer.js
@@ -1,22 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import Image from "next/image";
 
 const GifPlayer = ({ gif, still, playing, toggle, ...rest }) => (
   <div
-    className={classNames('gif_player', { 'playing': playing })}
-    onMouseEnter={toggle} onMouseLeave={toggle}
+    className={classNames("gif_player", { playing: playing })}
+    onMouseEnter={toggle}
+    onMouseLeave={toggle}
   >
     <div className="play_button" />
-    <img {...rest} src={playing ? (gif || still) : (still || gif)} />
+    <Image
+      width={75}
+      height={75}
+      {...rest}
+      src={playing ? gif || still : still || gif}
+    />
   </div>
 );
 
 GifPlayer.propTypes = {
   gif: PropTypes.string,
   still: PropTypes.string,
   playing: PropTypes.bool,
-  toggle: PropTypes.func
+  toggle: PropTypes.func,
 };
 
-export default GifPlayer;
+export default GifPlayer;
diff --git a/components/singleCard/index.js b/components/singleCard/index.js
@@ -2,6 +2,7 @@ import React from "react";
 import Link from "next/link";
 import PropTypes from "prop-types";
 import { GeoAlt, Cash, Bookmarks, BookmarksFill } from "react-bootstrap-icons";
+import Image from "next/image";
 
 import { CardWrapper, CardDetails, CardImage, CardTitle } from "./styles";
 
@@ -37,7 +38,13 @@ const SingleCard = ({ id, imageSrc, title, details }) => {
       <Link href={`/prokat/${id}`}>
         <a>
           <CardImage>
-            <img src={imageSrc}></img>
+            <Image
+              src="/img/sample_product_image.webp"
+              width="100%"
+              height="100%"
+              layout="responsive"
+              priotiy={true}
+            />
           </CardImage>
           <CardTitle>{title}</CardTitle>
           <CardDetails>

diff --git a/pages/prokat/[id].js b/pages/prokat/[id].js
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import Image from "next/image";
 
 import Layout, {
   Main,
@@ -45,13 +46,19 @@ const Prokat = (props) => {
             <ProkatDescription description="Прекрасный проектор для просмотра фильмов с друзъями. Предлогаем разные модели. Простой в управлении. 4k качество ктор для просмотра фильмов с друзъями. Предлогактор для просмотра фильмов с друзъями. Прекрасный проектор для просмотра фильмов с друзъями. Предлогаем разные модели. Простой в управлении. 4k качество ктор для просмотра фильмов с друзъями. Предлогактор для просмотра фильмов с друзъями." />
 
             <ContactOwnerWrapper>
-              <img src="../img/chat.png" />
-              <img src="../img/call.png" />
-              <img
+              <Image src="/img/chat.png" width={75} height={75} />
+              <Image src="/img/call.png" width={75} height={75} />
+              <Image
                 styles={{ fill: "red" }}
-                src="../img/viber-icon-colored.svg"
+                src="/img/viber-icon-colored.svg"
+                width={75}
+                height={75}
+              />
+              <Image
+                src="/img/telegram-icon-colored.svg"
+                width={75}
+                height={75}
               />
-              <img src="../img/telegram-icon-colored.svg" />
             </ContactOwnerWrapper>
           </Section_ST>
         </TwoColumnsDesktop>

diff --git a/public/img/sample_product_image.webp b/public/img/sample_product_image.webp