Comparison pages

blocks/ComparisonPopup/ComparisonPopup.jsx

@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import dynamic from "next/dynamic";
+import Select, { components } from "react-select";
+import styles from "./index.module.scss";
+import cx from "classnames";
+const Popup = dynamic(() => import("../../components/Popup"));
+const H1 = dynamic(() => import("../../components/Text/H1"));
+const Button = dynamic(() => import("../../components/Button"));
+
+const Control = ({ children, ...props }) => {
+  let logo = props.hasValue ? props?.getValue()?.[0]?.logo : null;
+  return (
+    <components.Control {...props} className={styles.control}>
+      {logo && (
+        <div
+          className={styles.logo}
+          style={{ backgroundImage: `url(${logo})` }}
+        ></div>
+      )}
+      {children}
+    </components.Control>
+  );
+};
+
+const Option = (props) => {
+  const { isSelected, isFocused } = props;
+
+  return (
+    <components.Option
+      {...props}
+      className={cx(styles.option, {
+        [styles.optionSelected]: isSelected,
+        [styles.optionFocused]: isFocused,
+      })}
+    />
+  );
+};
+
+const DropdownIndicator = (props) => {
+  console.log(props);
+  const { isFocused } = props;
+  return (
+    <components.DropdownIndicator
+      {...props}
+      className={cx({ [styles.isDropdownOpen]: isFocused })}
+    ></components.DropdownIndicator>
+  );
+};
+
+const IndicatorSeparator = ({ innerProps }) => {
+  return <span style={{ display: "none" }} {...innerProps} />;
+};
+
+export default function ComparisonPopup(props) {
+  const { tools } = props;
+  const [selectedOptionFirst, setSelectedOptionFirst] = useState(null);
+  const [selectedOptionSecond, setSelectedOptionSecond] = useState(null);
+
+  const handleChangeFirst = (selectedOption) => {
+    setSelectedOptionFirst(selectedOption);
+  };
+  const handleChangeSecond = (selectedOption) => {
+    setSelectedOptionSecond(selectedOption);
+  };
+
+  const options = tools.map((tool) => {
+    return { value: tool.id, label: tool.title, logo: tool.logo };
+  });
+
+  const components = { Control, IndicatorSeparator, Option, DropdownIndicator };
+
+  const isDisabled =
+    !selectedOptionFirst ||
+    !selectedOptionSecond ||
+    selectedOptionFirst?.value === selectedOptionSecond?.value;
+
+  return (
+    <Popup isOpen={props.isOpen} onClose={props.onClose}>
+      <H1 className={styles.title} tag="h2">
+        Can’t decide between
+        <br />
+        two tools?
+      </H1>
+      <img className={styles.image} src="/images/vs-big.svg" />
+      <div className={styles.selectsRow}>
+        <Select
+          placeholder="Select tool"
+          components={components}
+          className={styles.select}
+          value={selectedOptionFirst}
+          onChange={handleChangeFirst}
+          options={options}
+        />
+        <Select
+          placeholder="Select tool"
+          components={components}
+          className={styles.select}
+          value={selectedOptionSecond}
+          onChange={handleChangeSecond}
+          options={options}
+        />
+      </div>
+      <div className={styles.buttonWrap}>
+        <Button
+          href={
+            !isDisabled
+              ? `/compare/${selectedOptionFirst?.value}-vs-${selectedOptionSecond?.value}`
+              : null
+          }
+          disabled={isDisabled}
+          className={styles.button}
+          special="special"
+        >
+          Сompare →
+        </Button>
+      </div>
+    </Popup>
+  );
+}

blocks/ComparisonPopup/index.js

@@ -0,0 +1,2 @@
+import ComparisonPopup from "./ComparisonPopup";
+export default ComparisonPopup;

blocks/ComparisonPopup/index.module.scss

@@ -0,0 +1,91 @@
+@import "/styles/variables";
+
+.image {
+  position: absolute;
+  right: 50%;
+  transform: translateX(50%);
+  top: 95px;
+  z-index: 0;
+  @media (max-width: 767px) {
+    width: 50%;
+  }
+}
+.title {
+  position: relative;
+  text-align: center;
+  margin-top: 65px;
+  margin-bottom: 48px;
+  z-index: 2;
+  @media (max-width: 1023px) {
+    margin-top: 32px;
+    margin-bottom: 32px;
+  }
+}
+
+.buttonWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.button {
+  position: relative;
+}
+
+.logo {
+  width: 24px;
+  height: 24px;
+  border: 1px solid rgba(213, 213, 226, 0.5);
+  border-radius: 7.5px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.selectsRow {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 128px;
+  margin-bottom: 112px;
+  @media (max-width: 1023px) {
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 32px;
+  }
+}
+
+.select {
+  width: 340px;
+  .control {
+    cursor: pointer;
+    padding: 9px 16px;
+    border-color: $dark;
+    box-shadow: none !important;
+    &:hover {
+      border-color: $dark;
+    }
+  }
+  .option {
+    color: $dark;
+    &:hover {
+      background: $light;
+      color: $purple-hover;
+    }
+  }
+  .optionSelected {
+    background: $light;
+    color: $purple-hover;
+  }
+  .optionFocused {
+    background: #fff;
+     color: $dark;
+  }
+  .isDropdownOpen {
+    transform: rotate(-180deg);
+  }
+  @media (max-width: 767px) {
+    width: 100%;
+  }
+}

components/Gallery/Gallery.jsx → blocks/Gallery/Gallery.jsx

@@ -1,6 +1,6 @@
 import dynamic from "next/dynamic";
 import styles from "./Gallery.module.scss";
-import H2 from "../Text/H2";
+import H2 from "../../components/Text/H2";
 const Slider = dynamic(() => import("../../components/Slider"));
 // import Slider from "../Slider";
 // const slidesData = [

components/ToolPage/DescriptionCards.jsx → blocks/ToolPage/DescriptionCards.jsx

@@ -1,5 +1,5 @@
 import styles from "./DescriptionCards.module.scss";
-import Card from "../Card/Card";
+import Card from "../../components/Cards/Card";
 
 const getLicense = (props) => {
   let isOpen = false;

components/ToolPage/Header.jsx → blocks/ToolPage/Header.jsx

@@ -1,5 +1,5 @@
 import styles from "./Header.module.scss";
-import Button from "../Button";
+import Button from "../../components/Button";
 
 export default function Header(props) {
   return (

components/ToolPage/HowToGetHelp.jsx → blocks/ToolPage/HowToGetHelp.jsx

@@ -1,6 +1,6 @@
 import styles from "./HowToGetHelp.module.scss";
-import GetHelpCard from "../GetHelpCard";
-import H2 from "../Text/H2";
+import GetHelpCard from "../../components/Cards/GetHelpCard";
+import H2 from "../../components/Text/H2";
 import abbreviateNumber from "../../utils/number";
 
 export default function HowToGetHelp(props) {

components/ToolPage/HowToGetStarted.jsx → blocks/ToolPage/HowToGetStarted.jsx

@@ -1,6 +1,6 @@
 import styles from "./HowToGetStarted.module.scss";
-import GetStartedCard from "../GetStartedCard";
-import H2 from "../Text/H2";
+import GetStartedCard from "../../components/Cards/GetStartedCard";
+import H2 from "../../components/Text/H2";
 
 export default function HowToGetStarted(props) {
   return (

components/ToolPage/News.jsx → blocks/ToolPage/News.jsx

@@ -1,6 +1,6 @@
 import styles from "./News.module.scss";
-import NewsCard from "../NewsCard";
-import H2 from "../Text/H2";
+import NewsCard from "../../components/Cards/NewsCard";
+import H2 from "../../components/Text/H2";
 
 export default function Description(props) {
   return (

components/ToolPage/Popularity.jsx → blocks/ToolPage/Popularity.jsx

@@ -1,6 +1,6 @@
 import styles from "./Popularity.module.scss";
-import Card from "../Card/Card";
-import H2 from "../Text/H2";
+import Card from "../../components/Cards/Card";
+import H2 from "../../components/Text/H2";
 import moment from "moment";
 import abbreviateNumber from "../../utils/number";
 

components/Button/Button.jsx

@@ -1,18 +1,21 @@
 import styles from "./Button.module.scss";
 import Link from "next/link";
+import cx from 'classnames'
 
 export default function Button(props) {
   return (
-    <Link href={props.href}>
+    <Link href={props.href || "#"}>
       <a
         type="button"
         role="button"
+        disabled={props.disabled}
         {...props}
-        className={
-          props.className
-            ? `${props.className} ${styles.button}`
-            : styles.button
-        }
+        className={cx({
+          [styles.button]: true,
+          [props.className]: props.className,
+          [styles.special]: props.special,
+          [styles.disabled]: props.disabled,
+        })}
       >
         <span>{props.children}</span>
       </a>

components/Button/Button.module.scss

@@ -40,3 +40,23 @@
     color: $dark-05;
   }
 }
+.button.special {
+  background: $purple;
+  border-radius: 8px;
+  color: #ffffff;
+  border: 2px solid transparent;
+  padding: 15.5px 37.5px;
+  &:hover {
+    border: 2px solid $purple-02;
+    background: transparent;
+    color: $purple-02;
+  }
+}
+.button.disabled {
+  background: $light;
+  &:hover {
+    background: $light;
+    border-color: $light;
+    color: #fff;
+  }
+}

components/Cards/Comparison/ComparisonCard.jsx

@@ -0,0 +1,59 @@
+import styles from "./index.module.scss";
+import cx from "classnames";
+
+const defaultText = (
+  <span>
+    Сompare <br /> оther tool
+  </span>
+);
+const toolsNames = (tools) => {
+  return (
+    <span>
+      {tools?.[0]?.title || ''} &<br /> {tools?.[1]?.title || ''}
+    </span>
+  );
+};
+
+const toolsImages = (tools) => {
+  return (
+    <div className={styles.logoWrap}>
+      <div
+        className={cx(styles.logo, styles.firstLogo, {
+          [styles.empty]: !tools,
+        })}
+        style={{ backgroundImage: `url(${tools?.[0]?.logo || null})` }}
+        alt={`${tools?.[0]?.title || "empty"} logo`}
+      ></div>
+      <img className={styles.vs} src="/images/vs_logo.svg" />
+      <div
+        className={cx(styles.logo, styles.secondLogo, {
+          [styles.empty]: !tools,
+        })}
+        style={{ backgroundImage: `url(${tools?.[1]?.logo || null})` }}
+        alt={`${tools?.[0]?.title || "empty"} logo`}
+      ></div>
+    </div>
+  );
+}
+
+export default function ComparisonCard(props) {
+  const {tools, onClick} = props;
+  const isOther = !tools;
+  const link = !isOther ? `${tools[0].id}-vs-${tools[1].id}` : null;
+
+  return (
+    <a href={link} onClick={onClick} target="_blank">
+      <div
+        className={cx({
+          [styles.card]: true,
+          [props.className]: props.className,
+        })}
+      >
+        {toolsImages(tools)}
+        <div className={styles.cardText}>
+          {isOther ? defaultText : toolsNames(tools)}
+        </div>
+      </div>
+    </a>
+  );
+}

components/Cards/Comparison/index.js

@@ -0,0 +1,2 @@
+import ComparisonCard from "./ComparisonCard";
+export default ComparisonCard;