feat: relocate TextBlocks component from web

Author: Uzhastin-Nikita

src/components/molecules/Checkbox/Checkbox.styles.module.scss

@@ -0,0 +1,81 @@
+@import 'src/scss/mixins';
+
+.checkbox-container {
+  display: flex;
+  width: 70%;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+
+  @include mobile {
+    width: 100%;
+  }
+}
+
+.information-block {
+  display: block;
+  width: 80%;
+  margin-left: 30%;
+}
+
+.checkbox {
+  position: relative;
+  z-index: -1;
+  opacity: 0;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 34%;
+      width: 49px;
+      height: 23px;
+      border-radius: 13px;
+      background: $color-background-black;
+      transition: 0.2s;
+      border: 1px solid $color-white;
+
+      @include mobile {
+        width: 29px;
+        height: 13px;
+        margin-top: 8px;
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 34%;
+      width: 23px;
+      height: 23px;
+      border-radius: 10px;
+      background: $color-base;
+      transition: 0.2s;
+
+      @include mobile {
+        width: 13px;
+        height: 13px;
+        margin-top: 8px;
+      }
+    }
+  }
+
+  &:checked + label {
+    &::before {
+      background: $color-base;
+    }
+
+    &::after {
+      left: 26px;
+      border: 1px solid $color-white;
+      background-color: $color-background-black;
+
+      @include mobile {
+        left: 16px;
+      }
+    }
+  }
+}

src/components/molecules/Checkbox/Checkbox.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+
+import cx from 'classnames'
+
+import { InformationBlock } from 'src/components/molecules/TextBlocks/InformationBlock'
+
+import css from './Checkbox.styles.module.scss'
+
+export type CheckboxProps = {
+  className?: string
+  subheaderClassName?: string
+  citingClassName?: string
+  subheader?: string
+  citing?: string
+}
+
+export const Checkbox = ({ className, citing, subheader, subheaderClassName, citingClassName }: CheckboxProps) => {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <div className={cx(css.checkboxContainer, className)}>
+      <input
+        className={css.checkbox}
+        type="checkbox"
+        id="box"
+        checked={checked}
+        onChange={() => setChecked(!checked)}
+      />
+      <label htmlFor="box">
+        <InformationBlock
+          classNameBox={css.informationBlock}
+          classNameSubheader={subheaderClassName}
+          classNameCiting={citingClassName}
+          href="https://vk.com/digitable_team"
+          blocks={[
+            {
+              subheader,
+              citing
+            }
+          ]}
+        />
+      </label>
+    </div>
+  )
+}

src/components/molecules/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox'

src/components/molecules/InformationSection/InformationBlock/InformationBlock.styles.module.scss

@@ -0,0 +1,32 @@
+@import 'src/scss/mixins';
+
+.information-block:not(:first-child) {
+  margin-top: 45px;
+}
+
+.header {
+  font-size: 22px;
+  font-weight: 700;
+  font-family: $font-lato;
+
+  @include mobile {
+    font-size: 18px;
+    font-weight: 500;
+  }
+}
+
+.text {
+  font-family: $font-inter;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0;
+  text-align: left;
+  font-size: 22px;
+  color: #c4c4c4;
+
+  @include mobile {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 19px;
+  }
+}

src/components/molecules/InformationSection/InformationBlock/InformationBlock.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { InformationBlockContent } from 'src/components/molecules/InformationSection/InformationSection.types'
+
+import css from './InformationBlock.styles.module.scss'
+
+export type InformationBlockProps = InformationBlockContent
+
+export const InformationBlock = ({ header, texts }: InformationBlockProps) => {
+  return (
+    <div className={css.informationBlock}>
+      <p className={css.header}>{header}</p>
+      {texts.map((text, index) => (
+        <p key={index} className={css.text}>
+          {text}
+        </p>
+      ))}
+    </div>
+  )
+}

src/components/molecules/InformationSection/InformationBlock/index.ts

@@ -0,0 +1 @@
+export * from './InformationBlock'

src/components/molecules/InformationSection/InformationSection.styles.module.scss

@@ -0,0 +1,45 @@
+@import 'src/scss/mixins';
+
+.information-section {
+  display: flex;
+  flex-flow: wrap;
+  align-items: flex-start;
+
+  @include tablet {
+    align-items: flex-start;
+  }
+
+  @include mobile {
+    width: 90%;
+  }
+}
+
+.images,
+.blocks {
+  margin-top: 80px;
+}
+
+.blocks {
+  @include tablet {
+    width: 90%;
+    margin: 100px 20px;
+  }
+
+  @include mobile {
+    width: 100%;
+    margin: 30px 0 0 23px;
+  }
+}
+
+.images {
+  @include devices {
+    display: none;
+  }
+}
+
+.image {
+  @include desktop {
+    width: 450px;
+    height: 450px;
+  }
+}

src/components/molecules/InformationSection/InformationSection.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import cx from 'classnames'
+
+import { Image } from 'src/components/atoms/Image'
+
+import { InformationBlock } from './InformationBlock'
+import { getSections } from './InformationSection.utils'
+
+import css from './InformationSection.styles.module.scss'
+
+export const InformationSection = () => {
+  const sections = getSections()
+  return (
+    <div className={css.informationSection}>
+      <div className="row">
+        <div className={cx(css.blocks, 'col-md-8')}>
+          {sections.map((section, index) => {
+            return <InformationBlock key={index} header={section.header} texts={section.texts} />
+          })}
+        </div>
+        <div className={cx(css.images, 'col-md-4')}>
+          <Image src="/images/common/boxes.png" className={css.image} />
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/molecules/InformationSection/InformationSection.types.ts

@@ -0,0 +1,4 @@
+export type InformationBlockContent = {
+  header?: string
+  texts?: string[]
+}

src/components/molecules/InformationSection/InformationSection.utils.ts

@@ -0,0 +1,29 @@
+import { InformationBlockContent } from './InformationSection.types'
+
+const createSection = (header: string, texts: string[]): InformationBlockContent => {
+  return {
+    header,
+    texts
+  }
+}
+
+export const getSections = (): InformationBlockContent[] => {
+  return [
+    createSection('У вас есть доставка?', [
+      'Для Вас всегда доступны быстрые и надежные варианты доставки Вашего компьютера:',
+      '— Самовывоз',
+      '— Доставка до пункта выдачи',
+      '— Доставка до двери'
+    ]),
+    createSection('А в мой город доставите?', [
+      'Доставка осуществляется по всей России транспортными компаниями СДЭК, Деловые линии, DPD и Яндекс.Доставка.',
+      'При оформлении заказа наши менеджеры помогут Вам рассчитать стоимость и время доставки.'
+    ]),
+    createSection('Как быстро?', [
+      'Всё зависит от наличия:',
+      '— Товар в наличии отправляем в течение дня после оформления заказа.',
+      '— Товар под заказ изготавливается не более 60 рабочих дней.'
+    ]),
+    createSection('Почему я должен вам верить?', ['По законам РФ покупатель получает кассовый чек и бланк предоплаты.'])
+  ]
+}