fix: add connect form

src/shared/ui/button/index.ts

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

src/shared/ui/button/styles.module.scss

@@ -0,0 +1,105 @@
+.Button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: rem(8px) rem(10px);
+  border-radius: rem(16px);
+  min-height: rem(40px);
+
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: rem(16px);
+  line-height: 100%;
+
+  transition: all 0.15s linear;
+  white-space: nowrap;
+  width: max-content;
+
+  @include ifdesktop{
+    font-size: rem(20px);
+    border-radius: rem(16px);
+    padding: rem(4px) rem(24px);
+    min-height: rem(48px);
+  }
+
+  &_fullWidth {
+    width: 100%;
+  }
+
+  svg {
+    width: rem(18px);
+    height: rem(18px);
+    //fill: var(--text-primary);
+
+    margin-right: rem(18px);
+  }
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 1px 1px 1px 0px $color-darkgray;
+  }
+
+  &:active {
+    box-shadow: inset 1px 1px 2px 0px $color-darkgray;
+  }
+
+  &:hover svg {
+    fill: var(--white);
+  }
+
+  &_default {
+    background: $color-green;
+    color: $color-white;
+  }
+
+  &_green {
+    background: $color-green;
+    color: $color-white;
+  }
+
+  &_ghost {
+    background: transparent;
+    color: $color-white;
+    border: 1px solid $color-white;
+
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+
+    &:active {
+      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+
+    &:hover svg {
+      fill: var(--white);
+    }
+  }
+
+  &_white {
+    background: $color-white;
+    color: $color-green;
+    border: 1px solid $color-green;
+
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+
+    &:active {
+      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+
+    &:hover svg {
+      fill: var(--white);
+    }
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+  }
+}

src/shared/ui/button/ui.tsx

@@ -0,0 +1,53 @@
+import s from './styles.module.scss';
+import {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FunctionComponent,
+  ReactNode,
+  SVGProps,
+} from 'react';
+import { clsx } from 'clsx';
+
+type ButtonProps = {
+  className?: string;
+  children?: ReactNode;
+  disabled?: boolean;
+  Icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
+  onClick?: () => void;
+  variant?: 'default' | 'green' | 'ghost' | 'white';
+  fullWidth?: boolean;
+} & DetailedHTMLProps<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
+function Button({
+  className,
+  children,
+  onClick,
+  Icon,
+  disabled,
+  variant = 'default',
+  fullWidth = false,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={clsx(
+        className,
+        s.Button,
+        disabled && s.Button_disabled,
+        s['Button_' + variant],
+        fullWidth && s.Button_fullWidth,
+      )}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+    >
+      {Icon && <Icon />}
+      {children}
+    </button>
+  );
+}
+
+export { Button };

src/shared/ui/index.ts

@@ -0,0 +1,3 @@
+export * from './input';
+export * from './phone-input';
+export * from './button';

src/shared/ui/input/index.ts

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

src/shared/ui/input/styles.module.scss

@@ -0,0 +1,98 @@
+.Container {
+  position: relative;
+  display: block;
+}
+
+.Input {
+  display: flex;
+  background: $color-white;
+  border: 1px solid $color-darkgray;
+  border-radius: rem(16px);
+  padding: rem(4px) rem(10px);
+  transition: border ease .5s;
+
+  font-family: $font-roboto;
+  font-weight: $font-regular;
+  font-size: rem(16px);
+  line-height: 100%;
+  color: $color-text;
+  width: max-content;
+
+  @include iftablet {
+    font-size: rem(16px);
+  }
+
+  @include iflaptop {
+    font-size: rem(18px);
+    padding: rem(10px) rem(16px);
+  }
+
+  @include ifdesktop {
+    font-size: rem(20px);
+  }
+
+  &:focus {
+    border-color: $color-green;
+    transition: border-color ease .5s;
+  }
+
+  &:hover {
+    border-color: $color-text;
+    transition: border-color ease .5s;
+  }
+
+  &:focus:hover {
+    border-color: $color-green;
+    transition: border-color ease .5s;
+  }
+
+  &_error {
+    border-color: $color-error;
+  }
+
+  &_fullWidth {
+    width: 100%;
+  }
+
+  &_ghost {
+    background: transparent;
+    color: $color-white;
+    border: 1px solid $color-white;
+
+    &:focus {
+      //border-color: $color-orange;
+      border-color: $color-white;
+      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+
+    &:hover {
+      border-color: $color-white;
+      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+
+    &:focus:hover {
+      //border-color: $color-orange;
+      border-color: $color-white;
+      box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+
+    &::placeholder {
+      color: $color-white;
+    }
+  }
+}
+
+.Error {
+  position: absolute;
+  z-index: 2;
+  left: rem(8px);
+  bottom: rem(-16px);
+  font-family: $font-roboto;
+  font-weight: $font-light;
+  font-size: rem(12px);
+  line-height: 100%;
+  color: $color-error;
+}

src/shared/ui/input/ui.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import s from './styles.module.scss';
+
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, Ref } from 'react';
+import { clsx } from 'clsx';
+
+type InputProps = {
+  wrapperClassName?: string;
+  className?: string;
+  fullWidth?: boolean;
+  variant?: 'default' | 'ghost';
+  error?: string | boolean;
+  errorTextColor?: string;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+const Input = forwardRef(function Input(
+  {
+    className,
+    fullWidth = false,
+    variant = 'default',
+    error = false,
+    errorTextColor,
+    ...props
+  }: InputProps,
+  ref: Ref<HTMLInputElement>,
+) {
+  return (
+    <div className={s.Container}>
+      <input
+        {...props}
+        ref={ref}
+        className={clsx(
+          s.Input,
+          s['Input_' + variant],
+          fullWidth && s.Input_fullWidth,
+          error && s.Input_error,
+          className,
+        )}
+      />
+      {error && (
+        <span className={s.Error} style={{ color: errorTextColor }}>
+          {error}
+        </span>
+      )}
+    </div>
+  );
+});
+
+export { Input };

src/shared/ui/phone-input/index.ts

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

src/shared/ui/phone-input/ui.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useMaskito } from '@maskito/react';
+import { maskitoPhoneOptionsGenerator } from '@maskito/phone';
+import metadata from 'libphonenumber-js/min/metadata';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { Input } from '@shared/ui';
+
+type PhoneInput = {
+  className?: string;
+  variant?: 'default' | 'ghost';
+  error?: string | boolean;
+  errorTextColor?: string;
+  fullWidth?: boolean;
+} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+function PhoneInput({ ...props }: PhoneInput) {
+  const options = maskitoPhoneOptionsGenerator({
+    countryIsoCode: 'RU',
+    metadata,
+  });
+  const maskedInputRef = useMaskito({ options });
+
+  return <Input {...props} ref={maskedInputRef} type='tel' />;
+}
+
+export { PhoneInput };