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;