diff --git a/src/app/[locale]/report/[id]/page.tsx b/src/app/[locale]/report/[id]/page.tsx index 715fca5..790db49 100644 --- a/src/app/[locale]/report/[id]/page.tsx +++ b/src/app/[locale]/report/[id]/page.tsx @@ -6,7 +6,6 @@ import ReportInformation from "@/widgets/report-details/ReportInformation/Report import ReportImages from "@/widgets/report-details/ReportImages/ReportImages"; import dynamic from "next/dynamic"; import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs"; -import NotFound from "@/widgets/NotFound/NotFound"; import { apiInstance } from "@/shared/config/apiConfig"; const DynamicMap = dynamic( @@ -26,11 +25,11 @@ export async function generateMetadata({ ); return { - title: `KG ROAD | ${response.data.location[0].address}`, - description: response.data.description, + title: `KG ROAD | ${response.data.description}`, + description: `${response.data.location[0].address}, ${response.data.description}`, openGraph: { - title: `KG ROAD | ${response.data.location[0].address}`, - description: response.data.description, + title: `KG ROAD | ${response.data.description}`, + description: `${response.data.location[0].address}, ${response.data.description}`, images: [response.data.image[0].image], type: "article", }, 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/shared/config/navigation.ts b/src/shared/config/navigation.ts index 8c51d5c..fa72bff 100644 --- a/src/shared/config/navigation.ts +++ b/src/shared/config/navigation.ts @@ -1,7 +1,7 @@ import { createSharedPathnamesNavigation } from "next-intl/navigation"; export const locales = ["en", "ru", "kg"] as const; -export const localePrefix = "always"; // Default +export const localePrefix = "always"; export const { Link, redirect, usePathname, useRouter } = createSharedPathnamesNavigation({ locales, localePrefix }); diff --git a/src/widgets/Navbar/NavMenu/NavMenu.scss b/src/widgets/Navbar/NavMenu/NavMenu.scss index 0ea1bf5..6eff243 100644 --- a/src/widgets/Navbar/NavMenu/NavMenu.scss +++ b/src/widgets/Navbar/NavMenu/NavMenu.scss @@ -4,7 +4,7 @@ padding: 48px 30px 30px 30px; width: 100%; height: 100vh; - min-height: 500px; + min-height: 600px; position: fixed; top: 72px; left: 0; @@ -12,8 +12,10 @@ flex-direction: column; gap: 26px; background-color: white; + overflow: scroll; - a { + a, + button { justify-content: flex-start; font-size: 24px; font-weight: 500; @@ -22,4 +24,31 @@ &__link_active { color: $light-blue; } + + &__language { + button { + margin-bottom: 20px; + display: flex; + align-items: center; + gap: 4px; + color: #66727f; + img { + width: 18px; + height: 18px; + } + } + &-wrapper { + display: flex; + flex-direction: column; + gap: 10px; + a { + color: #66727f; + } + } + + &_active { + color: black !important; + font-weight: 700 !important; + } + } } diff --git a/src/widgets/Navbar/NavMenu/NavMenu.tsx b/src/widgets/Navbar/NavMenu/NavMenu.tsx index ad8766b..3dd4fda 100644 --- a/src/widgets/Navbar/NavMenu/NavMenu.tsx +++ b/src/widgets/Navbar/NavMenu/NavMenu.tsx @@ -2,6 +2,10 @@ import { LINKS } from "@/shared/variables/links"; import "./NavMenu.scss"; import NavAuth from "../NavAuth/NavAuth"; import { Link, usePathname } from "@/shared/config/navigation"; +import { useEffect, useState, useTransition } from "react"; +import { useParams, useRouter } from "next/navigation"; +import chevron_down from "./icons/chevron_down.svg"; +import Image from "next/image"; interface INavMenuProps { setOpenMenu: (boolean: boolean) => void; @@ -10,7 +14,37 @@ interface INavMenuProps { const NavMenu: React.FC = ({ setOpenMenu, }: INavMenuProps) => { + const [openMenuLanguage, setOpenMenuLanguage] = + useState(false); + const router = useRouter(); const pathname = usePathname(); + const { locale } = useParams(); + + const [_, startTransition] = useTransition(); + const [currentLanguage, setCurrentLanguage] = useState( + locale as string + ); + + useEffect(() => { + const params = window.location.search || ""; + startTransition(() => { + router.replace(`/${currentLanguage}${pathname}${params}`, { + scroll: false, + }); + }); + }, [currentLanguage]); + + const langKeys: Record = { + ru: "Русский", + kg: "Кыргызча", + en: "English", + }; + + const languages = [ + { id: 1, language: "Русский", pathname: "ru" as const }, + { id: 2, language: "Кыргызча", pathname: "kg" as const }, + { id: 3, language: "English", pathname: "en" as const }, + ]; return ( ); }; diff --git a/src/widgets/Navbar/NavMenu/icons/chevron_down.svg b/src/widgets/Navbar/NavMenu/icons/chevron_down.svg new file mode 100644 index 0000000..3ebba56 --- /dev/null +++ b/src/widgets/Navbar/NavMenu/icons/chevron_down.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/widgets/forms/ReportForm/ReportForm.tsx b/src/widgets/forms/ReportForm/ReportForm.tsx index 3858858..0bdd347 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; @@ -30,10 +31,10 @@ interface ILatLng { const ReportForm = () => { const session = useSession(); - const router = useRouter(); 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 +125,7 @@ const ReportForm = () => { ); if ([200, 201].includes(res.status)) { - router.push("/"); + setShowMessage(true); } } catch (error: unknown) { if (error instanceof AxiosError) { @@ -294,6 +295,12 @@ const ReportForm = () => { )} {error ?

{error}

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