diff --git a/src/features/ReportMessage/ReportMessage.scss b/src/features/ReportMessage/ReportMessage.scss new file mode 100644 index 0000000..248cf9b --- /dev/null +++ b/src/features/ReportMessage/ReportMessage.scss @@ -0,0 +1,70 @@ +.report-message { + padding: 16px; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 30000; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.6); + + &__wrapper { + max-width: 400px; + padding: 24px; + display: flex; + flex-direction: column; + gap: 16px; + background-color: white; + border-radius: 12px; + box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.04), + 0px 20px 24px -4px rgba(16, 24, 40, 0.1); + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__text { + margin-bottom: 16px; + + h4 { + margin-bottom: 4px; + color: rgb(16, 24, 40); + font-family: Inter; + font-size: 18px; + font-weight: 600; + line-height: 28px; + } + + p { + color: rgb(71, 84, 103); + font-family: Inter; + font-size: 14px; + font-weight: 400; + line-height: 20px; + } + } + + a { + padding: 10px 18px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + border: 1px solid rgb(72, 159, 225); + border-radius: 8px; + box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); + background: rgb(72, 159, 225); + + color: rgb(255, 255, 255); + font-family: Inter; + font-size: 16px; + font-weight: 600; + line-height: 24px; + } +} diff --git a/src/features/ReportMessage/ReportMessage.tsx b/src/features/ReportMessage/ReportMessage.tsx new file mode 100644 index 0000000..4119277 --- /dev/null +++ b/src/features/ReportMessage/ReportMessage.tsx @@ -0,0 +1,54 @@ +import { Link, useRouter } from "@/shared/config/navigation"; +import "./ReportMessage.scss"; +import Image from "next/image"; +import close from "./icons/close.svg"; +import check from "./icons/check.svg"; +import { useEffect } from "react"; + +interface IReportMessageProps { + setShowMessage: (value: boolean) => void; + showMessage: boolean; +} + +const ReportMessage: React.FC = ({ + setShowMessage, + showMessage, +}: IReportMessageProps) => { + const router = useRouter(); + useEffect(() => { + if (showMessage) { + setTimeout(() => { + setShowMessage(false); + router.push("/"); + }, 5000); + } + }, [showMessage]); + return ( +
setShowMessage(false)} + className="report-message" + > +
e.stopPropagation()} + className="report-message__wrapper" + > +
+ Check Icon + +
+
+

Ваше обращение отправлено

+

+ Спасибо за ваше обращение. На данный момент оно в + модерации. +

+
+ Смотреть мои обращения +
+
+ ); +}; + +export default ReportMessage; diff --git a/src/features/ReportMessage/icons/check.svg b/src/features/ReportMessage/icons/check.svg new file mode 100644 index 0000000..26dd53d --- /dev/null +++ b/src/features/ReportMessage/icons/check.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/features/ReportMessage/icons/close.svg b/src/features/ReportMessage/icons/close.svg new file mode 100644 index 0000000..7c7d6a6 --- /dev/null +++ b/src/features/ReportMessage/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/widgets/forms/ReportForm/ReportForm.tsx b/src/widgets/forms/ReportForm/ReportForm.tsx index 3858858..f2d2df9 100644 --- a/src/widgets/forms/ReportForm/ReportForm.tsx +++ b/src/widgets/forms/ReportForm/ReportForm.tsx @@ -22,6 +22,7 @@ import { useSession } from "next-auth/react"; import { IDisplayMap } from "@/shared/types/map-type"; import Loader from "@/shared/ui/components/Loader/Loader"; import { useRouter } from "@/shared/config/navigation"; +import ReportMessage from "@/features/ReportMessage/ReportMessage"; interface ILatLng { lat: number; @@ -34,6 +35,7 @@ const ReportForm = () => { const [latLng, setLatLng] = useState([]); const [displayLatLng, setDisplayLatLng] = useState([]); const [images, setImages] = useState([]); + const [showMessage, setShowMessage] = useState(false); const position = { lat: 42.8746, lng: 74.606, @@ -124,7 +126,7 @@ const ReportForm = () => { ); if ([200, 201].includes(res.status)) { - router.push("/"); + setShowMessage(true); } } catch (error: unknown) { if (error instanceof AxiosError) { @@ -294,6 +296,12 @@ const ReportForm = () => { )} {error ?

{error}

: null} + {showMessage ? ( + + ) : null} ); };