@@ -22,8 +32,12 @@ function Sidebar({
определения точной стоимости.
Оставьте заявку или позвоните по телефону
-
-
+7 (900) 241-34-34
+
+
+ +7 (900) 241-34-34
+
diff --git a/src/shared/lib/clickOutside/index.ts b/src/shared/lib/clickOutside/index.ts
new file mode 100644
index 0000000..145b15f
--- /dev/null
+++ b/src/shared/lib/clickOutside/index.ts
@@ -0,0 +1 @@
+export { useClickOutside } from './useClickOutside';
diff --git a/src/shared/lib/clickOutside/useClickOutside.tsx b/src/shared/lib/clickOutside/useClickOutside.tsx
new file mode 100644
index 0000000..aab6bb7
--- /dev/null
+++ b/src/shared/lib/clickOutside/useClickOutside.tsx
@@ -0,0 +1,28 @@
+import { RefObject, useEffect } from 'react';
+
+export function useClickOutside(
+ ref: RefObject
,
+ fn: (event: Event) => void,
+) {
+ useEffect(() => {
+ const handleClickOutside = (event: Event) => {
+ const el = ref?.current;
+ if (event instanceof MouseEvent && window !== undefined) {
+ const x = event?.offsetX || 0;
+ const width = window?.innerWidth - 18;
+ if (x >= width) {
+ return;
+ }
+ }
+ if (!el || el.contains((event?.target as Node) || null)) {
+ return;
+ }
+ fn(event);
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [ref, fn]);
+}
diff --git a/src/shared/lib/detectIOS/detectIOS.ts b/src/shared/lib/detectIOS/detectIOS.ts
new file mode 100644
index 0000000..1084da2
--- /dev/null
+++ b/src/shared/lib/detectIOS/detectIOS.ts
@@ -0,0 +1,15 @@
+function detectIOS() {
+ const iosQuirkPresent = () => {
+ const audio = new Audio();
+ audio.volume = 0.5;
+ return audio.volume === 1; // volume cannot be changed from "1" on iOS 12 and below
+ };
+
+ const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+ const isAppleDevice = navigator.userAgent.includes('Macintosh');
+ const isTouchScreen = navigator.maxTouchPoints >= 1; // true for iOS 13 (and hopefully beyond)
+
+ return isIOS || (isAppleDevice && (isTouchScreen || iosQuirkPresent()));
+}
+
+export { detectIOS };
diff --git a/src/shared/lib/detectIOS/index.ts b/src/shared/lib/detectIOS/index.ts
new file mode 100644
index 0000000..544abe3
--- /dev/null
+++ b/src/shared/lib/detectIOS/index.ts
@@ -0,0 +1 @@
+export { detectIOS } from './detectIOS';
diff --git a/src/shared/lib/index.ts b/src/shared/lib/index.ts
new file mode 100644
index 0000000..c2178b3
--- /dev/null
+++ b/src/shared/lib/index.ts
@@ -0,0 +1,2 @@
+export { useClickOutside } from './clickOutside';
+export { detectIOS } from './detectIOS';
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 8b6fb1a..2b3a1c8 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -1,3 +1,5 @@
export * from './input';
export * from './phone-input';
export * from './button';
+export * from './modal';
+export * from './text-area';
diff --git a/src/shared/ui/modal/close-icon.tsx b/src/shared/ui/modal/close-icon.tsx
new file mode 100644
index 0000000..200496f
--- /dev/null
+++ b/src/shared/ui/modal/close-icon.tsx
@@ -0,0 +1,23 @@
+import { SVGProps } from 'react';
+
+const CloseIcon = ({ ...props }: SVGProps) => (
+
+);
+
+export { CloseIcon };
diff --git a/src/shared/ui/modal/index.ts b/src/shared/ui/modal/index.ts
new file mode 100644
index 0000000..366f7da
--- /dev/null
+++ b/src/shared/ui/modal/index.ts
@@ -0,0 +1,2 @@
+export { Modal } from './modal';
+export { ModalContent } from './modal-content';
diff --git a/src/shared/ui/modal/modal-content.module.scss b/src/shared/ui/modal/modal-content.module.scss
new file mode 100644
index 0000000..e1b49a9
--- /dev/null
+++ b/src/shared/ui/modal/modal-content.module.scss
@@ -0,0 +1,79 @@
+.ModalContent {
+ position: absolute;
+ width: rem(360px);
+ padding: rem(40px) rem(20px) rem(20px);
+ border-radius: rem(20px);
+ background: white;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+ overflow: auto;
+ animation: fadeIn ease 0.3s;
+
+ @include iftablet {
+ top: unset;
+ width: rem(540px);
+ padding: rem(40px) rem(24px) rem(24px);
+ }
+
+ @include iflaptop {
+ padding: rem(40px) rem(30px) rem(30px);
+ }
+
+ @include ifdesktop {
+ width: rem(640px);
+ padding: rem(60px) rem(40px) rem(40px);
+ }
+
+ &_open {
+ animation: fadeOut ease 0.3s;
+ }
+
+ &_isIOS {
+ height: 100vh !important;
+
+ @include iftablet {
+ height: 100%;
+ }
+ }
+}
+
+
+.Inner {
+ position: relative;
+ overflow: hidden;
+}
+
+
+.CloseBtn {
+ position: absolute;
+ top: rem(20px);
+ right: rem(20px);
+ width: rem(24px);
+ height: rem(24px);
+ cursor: pointer;
+ transform: rotate(0deg);
+ transition: transform 0.3s;
+
+ &:hover,
+ &:active {
+ transform: rotate(90deg);
+ transition: transform 0.3s;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/src/shared/ui/modal/modal-content.tsx b/src/shared/ui/modal/modal-content.tsx
new file mode 100644
index 0000000..43f4abe
--- /dev/null
+++ b/src/shared/ui/modal/modal-content.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import s from './modal-content.module.scss';
+import { MouseEvent, ReactNode, useRef } from 'react';
+import clsx from 'clsx';
+import { useModal } from '@core/providers/modal-provider';
+import { detectIOS, useClickOutside } from '@shared/lib';
+import { CloseIcon } from '@shared/ui/modal/close-icon';
+
+function ModalContent(props: {
+ children: ReactNode;
+ className?: string;
+ innerClassName?: string;
+ closeByClickOutside?: boolean;
+}) {
+ const {
+ children,
+ className,
+ innerClassName,
+ closeByClickOutside = false,
+ } = props;
+
+ const modal = useModal();
+
+ const hideModal = () => modal.hideModal();
+
+ const modalRef = useRef(null);
+
+ const handleClickOutside = () => closeByClickOutside && hideModal();
+
+ useClickOutside(modalRef, handleClickOutside);
+
+ const isIOS = detectIOS();
+
+ const disableClick = (e: MouseEvent) => e.stopPropagation();
+
+ return (
+
+ );
+}
+
+export { ModalContent };
diff --git a/src/shared/ui/modal/modal.module.scss b/src/shared/ui/modal/modal.module.scss
new file mode 100644
index 0000000..5ec3945
--- /dev/null
+++ b/src/shared/ui/modal/modal.module.scss
@@ -0,0 +1,54 @@
+.ModalBackdrop {
+ z-index: 1000;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba(0, 0, 0, 0.5);
+ padding: 0;
+ animation: fadeIn ease 0.3s;
+
+ @include iftablet {
+ position: fixed;
+ height: 100vh;
+ padding: 0 rem(20px);
+ }
+
+ @include iflaptop {
+ padding: 0 rem(48px);
+ }
+
+ &_open {
+ animation: fadeOut ease 0.3s;
+ }
+
+ &_isIOS {
+ height: 150vh !important;
+
+ @include iftablet {
+ height: unset;
+ }
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/shared/ui/modal/modal.tsx b/src/shared/ui/modal/modal.tsx
new file mode 100644
index 0000000..e744453
--- /dev/null
+++ b/src/shared/ui/modal/modal.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import s from './modal.module.scss';
+import { ReactNode, useEffect } from 'react';
+import clsx from 'clsx';
+import { detectIOS } from '@shared/lib';
+import { createPortal } from 'react-dom';
+
+interface ModalProps {
+ isOpen: boolean;
+ onClose: () => void;
+ children: ReactNode;
+}
+
+const Modal = ({ children, isOpen, onClose }: ModalProps) => {
+ useEffect(() => {
+ const html = document.documentElement;
+ if (isOpen) {
+ html.style.overflow = 'hidden';
+ }
+ return () => {
+ html.style.overflow = '';
+ };
+ }, [isOpen]);
+
+ if (!isOpen) return null;
+
+ const isIOS = detectIOS();
+
+ return createPortal(
+
+ {children}
+
,
+ document.body,
+ );
+};
+
+export { Modal };
diff --git a/src/shared/ui/text-area/index.ts b/src/shared/ui/text-area/index.ts
new file mode 100644
index 0000000..5ecdd1f
--- /dev/null
+++ b/src/shared/ui/text-area/index.ts
@@ -0,0 +1 @@
+export * from './ui';
diff --git a/src/shared/ui/text-area/styles.module.scss b/src/shared/ui/text-area/styles.module.scss
new file mode 100644
index 0000000..fdf0a71
--- /dev/null
+++ b/src/shared/ui/text-area/styles.module.scss
@@ -0,0 +1,139 @@
+.Container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ width: max-content;
+ /* Allows the `resize` property to work on the div */
+ overflow: hidden;
+
+ &_fullWidth {
+ width: 100%;
+ }
+}
+
+.Area {
+ background: $color-white;
+ border: 1px solid $color-darkgray;
+ border-radius: rem(16px);
+ padding: rem(10px) rem(10px);
+ transition: border ease .5s;
+
+ font-family: $font-roboto;
+ font-weight: $font-regular;
+ font-size: rem(16px);
+ line-height: 100%;
+ color: $color-text;
+
+ resize: none;
+ display: block;
+ width: 100%;
+ flex-grow: 1;
+
+ @include iftablet {
+ font-size: rem(18px);
+ border-radius: rem(20px);
+ padding: rem(10px) rem(24px);
+ }
+
+ @include iflaptop {
+ font-size: rem(20px);
+ padding: rem(10px) rem(20px);
+ }
+
+ @include ifdesktop {
+ font-size: rem(24px);
+ }
+
+ /* scrollbar */
+ & {
+ /* Arrow mouse cursor over the scrollbar */
+ cursor: auto;
+ }
+
+ &::-webkit-scrollbar {
+ width: rem(12px);
+ height: rem(12px);
+ }
+
+ &::-webkit-scrollbar-track,
+ &::-webkit-scrollbar-thumb {
+ background-clip: content-box;
+ border: rem(4px) solid transparent;
+ border-radius: rem(12px);
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: #333; // цвет дорожки
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #999; // цвет указателя
+ }
+
+ @media (hover: hover) {
+ :where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
+ background-color: #999;
+ }
+ }
+
+ &:where(:autofill) {
+ /* Reliably removes native autofill colors */
+ background-clip: text;
+ -webkit-text-fill-color: #999;
+ }
+
+
+ &: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;
+ }
+
+ &:focus-visible {
+ outline: none;
+ }
+
+ &_ghost {
+ background: transparent;
+ color: $color-white;
+
+ &:focus {
+ border-color: $color-green;
+ transition: border-color ease .5s;
+ }
+
+ &:hover {
+ border-color: $color-white;
+ transition: border-color ease .5s;
+ }
+
+ &:focus:hover {
+ border-color: $color-green;
+ transition: border-color ease .5s;
+ }
+ }
+
+ &_error {
+ border: 1px solid $color-error;
+ }
+}
+
+.Error {
+ margin-left: 8px;
+ margin-top: 4px;
+ font-family: $font-roboto;
+ font-weight: $font-light;
+ font-size: rem(12px);
+ line-height: 100%;
+ color: $color-error;
+}
\ No newline at end of file
diff --git a/src/shared/ui/text-area/ui.tsx b/src/shared/ui/text-area/ui.tsx
new file mode 100644
index 0000000..3497d1d
--- /dev/null
+++ b/src/shared/ui/text-area/ui.tsx
@@ -0,0 +1,58 @@
+import s from './styles.module.scss';
+import {
+ DetailedHTMLProps,
+ forwardRef,
+ ReactNode,
+ Ref,
+ TextareaHTMLAttributes,
+} from 'react';
+import { clsx } from 'clsx';
+
+type TextAreaProps = {
+ className?: string;
+ children?: ReactNode;
+ variant?: 'default' | 'ghost';
+ fullWidth?: boolean;
+ error?: string | boolean;
+ errorTextColor?: string;
+} & DetailedHTMLProps<
+ TextareaHTMLAttributes,
+ HTMLTextAreaElement
+>;
+
+const TextArea = forwardRef(function TextArea(
+ {
+ className,
+ children,
+ variant = 'default',
+ fullWidth = false,
+ error = false,
+ errorTextColor,
+ ...props
+ }: TextAreaProps,
+ ref: Ref,
+) {
+ return (
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ );
+});
+
+export { TextArea };