renamed folders

src/shared/assets/logo.svg

@@ -0,0 +1,12 @@
+<svg width="138.000000" height="33.000000" viewBox="0 0 138 33" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<pattern id="pattern_1252_375810" patternContentUnits="objectBoundingBox" width="1.000000" height="1.000000">
+			<use xlink:href="#image1252_37581_0" transform="matrix(0.004525,0,0,0.018922,0,-0.00144)"/>
+		</pattern>
+		<image id="image1252_37581_0" width="221.000000" height="53.000000" xlink:href="data:image/png;base64,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 truncated
+	</defs>
+	<rect id="image 1" width="138.000000" height="33.000000" fill="url(#pattern_1252_375810)" fill-opacity="1.000000"/>
+</svg>

src/shared/config/apiConfig.ts

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const API_URL = process.env["NEXT_PUBLIC_BASE_API"];
+
+export const apiInstance = axios.create({
+  baseURL: API_URL,
+});

src/shared/config/authConfig.ts

@@ -0,0 +1,89 @@
+import axios from "axios";
+import { AuthOptions } from "next-auth";
+import { JWT } from "next-auth/jwt";
+import CredentialsProvider from "next-auth/providers/credentials";
+
+interface IToken {
+  access: string;
+}
+
+const refreshToken = async (token: JWT): Promise<JWT> => {
+  const data = {
+    refresh: token.refresh_token,
+  };
+
+  const response = await axios.post<IToken>(
+    "https://api.kgroaduat.fishrungames.com/api/v1/token/refresh/",
+    data
+  );
+
+  return {
+    ...token,
+    access_token: response.data.access,
+  };
+};
+
+export const authConfig: AuthOptions = {
+  providers: [
+    CredentialsProvider({
+      name: "Credentials",
+
+      credentials: {
+        email: {
+          label: "Email",
+          type: "text",
+          placeholder: "jsmith@example.com",
+        },
+        password: { label: "Password", type: "password" },
+      },
+
+      async authorize(credentials, req) {
+        if (!credentials?.email || !credentials?.password)
+          return null;
+
+        const { email, password } = credentials as any;
+
+        const res = await fetch(
+          "https://api.kgroaduat.fishrungames.com/api/v1/users/login/",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              email,
+              password,
+            }),
+          }
+        );
+
+        if (res.status.toString()[0] === "4") {
+          return null;
+        }
+
+        const user = await res.json();
+        return user;
+      },
+    }),
+  ],
+  pages: {
+    signIn: "/sign-in",
+  },
+  session: {
+    strategy: "jwt",
+  },
+  callbacks: {
+    async jwt({ token, user }) {
+      if (user) return { ...token, ...user };
+
+      return refreshToken(token);
+    },
+
+    async session({ token, session }) {
+      session.access_token = token.access_token;
+      session.refresh_token = token.refresh_token;
+
+      return session;
+    },
+  },
+};

src/shared/fonts/TildaSans-Black/TildaSans-Black.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "Tilda Sans";
+  src: url("TildaSans-Black.eot");
+  src: url("TildaSans-Black.eot?#iefix") format("embedded-opentype"),
+    url("TildaSans-Black.woff2") format("woff2"),
+    url("TildaSans-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}

src/shared/fonts/TildaSans-Bold/TildaSans-Bold.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "Tilda Sans";
+  src: url("TildaSans-Bold.eot");
+  src: url("TildaSans-Bold.eot?#iefix") format("embedded-opentype"),
+    url("TildaSans-Bold.woff2") format("woff2"),
+    url("TildaSans-Bold.woff") format("woff");
+  font-weight: 700;
+}

src/shared/fonts/TildaSans-ExtraBold/TildaSans-ExtraBold.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "Tilda Sans";
+  src: url("TildaSans-ExtraBold.eot");
+  src: url("TildaSans-ExtraBold.eot?#iefix")
+      format("embedded-opentype"),
+    url("TildaSans-ExtraBold.woff2") format("woff2"),
+    url("TildaSans-ExtraBold.woff") format("woff");
+  font-weight: 800;
+}

src/shared/fonts/TildaSans-Light/TildaSans-Light.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "Tilda Sans";
+  src: url("TildaSans-Light.eot");
+  src: url("TildaSans-Light.eot?#iefix") format("embedded-opentype"),
+    url("TildaSans-Light.woff2") format("woff2"),
+    url("TildaSans-Light.woff") format("woff");
+  font-weight: 300;
+}

src/shared/fonts/TildaSans-Medium/TildaSans-Medium.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "Tilda Sans";
+  src: url("TildaSans-Medium.eot");
+  src: url("TildaSans-Medium.eot?#iefix") format("embedded-opentype"),
+    url("TildaSans-Medium.woff2") format("woff2"),
+    url("TildaSans-Medium.woff") format("woff");
+  font-weight: 500;
+}

src/shared/fonts/TildaSans-Regular/TildaSans-Regular.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "Tilda Sans";
+  src: url("TildaSans-Regular.eot");
+  src: url("TildaSans-Regular.eot?#iefix") format("embedded-opentype"),
+    url("TildaSans-Regular.woff2") format("woff2"),
+    url("TildaSans-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}

src/shared/fonts/TildaSans-Semibold/TildaSans-Semibold.css

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "Tilda Sans";
+  src: url("TildaSans-Semibold.eot");
+  src: url("TildaSans-Semibold.eot?#iefix")
+      format("embedded-opentype"),
+    url("TildaSans-Semibold.woff2") format("woff2"),
+    url("TildaSans-Semibold.woff") format("woff");
+  font-weight: 600;
+}

src/shared/fonts/fonts.scss

@@ -0,0 +1,7 @@
+@import "./TildaSans-Light/TildaSans-Light.css";
+@import "./TildaSans-Regular/TildaSans-Regular.css";
+@import "./TildaSans-Medium/TildaSans-Medium.css";
+@import "./TildaSans-Semibold/TildaSans-Semibold.css";
+@import "./TildaSans-Bold/TildaSans-Bold.css";
+@import "./TildaSans-Extrabold/TildaSans-Extrabold.css";
+@import "./TildaSans-Black/TildaSans-Black.css";

src/shared/icons/arrows.svg

@@ -0,0 +1,21 @@
+<svg width="36.000000" height="16.000000" viewBox="0 0 36 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip161_49481">
+			<rect id="arrow-down" width="16.000000" height="16.000000" fill="white" fill-opacity="0"/>
+		</clipPath>
+		<clipPath id="clip183_53161">
+			<rect id="arrow-down" width="16.000000" height="16.000000" transform="translate(36.000000 16.000000) rotate(180.000000)" fill="white" fill-opacity="0"/>
+		</clipPath>
+	</defs>
+	<rect id="arrow-down" width="16.000000" height="16.000000" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip161_49481)">
+		<path id="Icon" d="M8 3.33301L8 12.666M12.667 8L8 12.666L3.3335 8" stroke="#667085" stroke-opacity="1.000000" stroke-width="1.333333" stroke-linejoin="round"/>
+	</g>
+	<rect id="arrow-down" width="16.000000" height="16.000000" transform="translate(36.000000 16.000000) rotate(180.000000)" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip183_53161)">
+		<path id="Icon" d="M28 12.667L28 3.33398M23.333 8L28 3.33398L32.6665 8" stroke="#667085" stroke-opacity="1.000000" stroke-width="1.333333" stroke-linejoin="round"/>
+	</g>
+</svg>

src/shared/types/author-type.ts

@@ -0,0 +1,6 @@
+export interface IAuthor {
+  id: number;
+  first_name: string;
+  last_name: string;
+  govern_status: unknown;
+}

src/shared/types/fetch-type.ts

@@ -0,0 +1,5 @@
+export interface IFetch {
+  error: string;
+  data?: any;
+  isLoading: boolean;
+}

src/shared/types/list-type.ts

@@ -0,0 +1,5 @@
+export interface IList {
+  count: number | null;
+  previous: string | null;
+  next: string | null;
+}

src/shared/types/location-type.ts

@@ -0,0 +1,6 @@
+export interface ILocation {
+  id: 4;
+  latitude: number;
+  longitude: number;
+  address: string;
+}

src/shared/types/map-type.ts

@@ -0,0 +1,16 @@
+export interface IAddress {
+  city: string;
+  city_district: string;
+  country: string;
+  country_code: string;
+  road: string;
+  suburb: string;
+}
+
+export interface IDisplayMap {
+  lat: string;
+  lon: string;
+  address: IAddress;
+  place_id: number;
+  display_name: string;
+}

src/shared/types/my-reports.ts

@@ -0,0 +1,18 @@
+import { IList } from "./list-type";
+import { ILocation } from "./location-type";
+import { IReportImage } from "./report-image-type";
+
+export interface IMyReports {
+  id: number;
+  location: ILocation[];
+  image: IReportImage[];
+  status: number;
+  total_likes: number;
+  count_reviews: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface IMyReportsList extends IList {
+  results: IMyReports[];
+}

src/shared/types/news-type.ts

@@ -0,0 +1,16 @@
+import { IList } from "./list-type";
+
+export interface INews {
+  id: number;
+  image: string;
+  title: string;
+  description: string;
+  set_time: null;
+  created_at: string;
+  updated_at: string;
+  count_reviews: number;
+}
+
+export interface INewsList extends IList {
+  results: INews[];
+}

src/shared/types/profile-type.ts

@@ -0,0 +1,9 @@
+export interface IProfile {
+  id: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  image: string;
+  role: number;
+  govern_status: null;
+}

src/shared/types/report-image-type.ts

@@ -0,0 +1,4 @@
+export interface IReportImage {
+  id: number;
+  image: string;
+}

src/shared/types/report-type.ts

@@ -0,0 +1,17 @@
+import { IAuthor } from "./author-type";
+import { ILocation } from "./location-type";
+import { IReportImage } from "./report-image-type";
+
+export interface IReport {
+  results: any;
+  id: number;
+  image: IReportImage[];
+  description: string;
+  author: IAuthor;
+  created_at: string;
+  updated_at: string;
+  location: ILocation[];
+  category: number;
+  total_likes: number;
+  count_reviews: number;
+}

src/shared/types/review-type.ts

@@ -0,0 +1,18 @@
+import { IList } from "./list-type";
+
+export interface IReview {
+  id: number;
+  author: {
+    id: number;
+    first_name: string;
+    last_name: string;
+    image: string;
+    govern_status: null;
+  };
+  review: string;
+  created_at: string;
+}
+
+export interface IReviewList extends IList {
+  results: IReview[];
+}

src/shared/types/statistics-type.ts

@@ -0,0 +1,9 @@
+export interface IStatistics {
+  name: string;
+  broken_road_1: number;
+  hotbed_of_accidents_2: number;
+  local_defect_3: number;
+  repair_plans_4: number;
+  repaired_5: number;
+  local_defect_fixed_6: number;
+}

src/shared/types/token-type.ts

@@ -0,0 +1,5 @@
+export interface ITokens {
+  refresh_token: string;
+  access_token: string;
+  expires_in: string;
+}

src/shared/types/user-rating-type.ts

@@ -0,0 +1,8 @@
+export interface IUserRatings {
+  user_id: number;
+  username: string;
+  report_count: number;
+  likes_given_count: number;
+  likes_received_count: number;
+  average_rating: number;
+}

src/shared/ui/auth-classes.scss

@@ -0,0 +1,99 @@
+@import "./variables.scss";
+
+.auth-page {
+  padding: 96px 32px 48px 32px;
+  height: 100vh;
+  min-height: 800px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.auth-wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.auth-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(234, 236, 240);
+  border-radius: 10px;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  background: rgb(255, 255, 255);
+}
+
+.auth-icon2 {
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 8px solid rgba(72, 159, 225, 0.15);
+  border-radius: 50%;
+  background: rgba(72, 159, 225, 0.3);
+
+  img {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.auth-header {
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  text-align: center;
+
+  h2 {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 32px;
+    color: $gray-900;
+  }
+
+  p {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    color: $gray-500;
+  }
+}
+
+.auth-redirect {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: $gray-500;
+
+  a {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    color: $light-blue;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .auth-page {
+    padding: 66px 30px;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .auth-page {
+    padding: 48px 16px;
+    min-height: 600px;
+  }
+
+  .auth-wrapper {
+    width: 100%;
+  }
+}

src/shared/ui/components/Loader/Loader.scss

@@ -0,0 +1,19 @@
+.loader {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid #fff;
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/shared/ui/components/Loader/Loader.tsx

@@ -0,0 +1,7 @@
+import "./Loader.scss";
+
+const Loader = () => {
+  return <span className="loader"></span>;
+};
+
+export default Loader;

src/shared/ui/components/Paragraph/Paragraph.scss

@@ -0,0 +1,12 @@
+.paragraph {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 29px;
+}
+
+@media screen and (max-width: 550px) {
+  .paragraph {
+    font-size: 18px;
+    line-height: 22px;
+  }
+}

src/shared/ui/components/Paragraph/Paragraph.tsx

@@ -0,0 +1,13 @@
+import "./Paragraph.scss";
+
+interface IParagraphProps {
+  children: React.ReactNode;
+}
+
+const Paragraph: React.FC<IParagraphProps> = ({
+  children,
+}: IParagraphProps) => {
+  return <p className="paragraph">{children}</p>;
+};
+
+export default Paragraph;

src/shared/ui/components/Typography/Typography.scss

@@ -0,0 +1,27 @@
+@import "../../variables.scss";
+
+.typography-h2,
+.typography-h3 {
+  width: fit-content;
+  text-align: center;
+  color: $black;
+  font-size: 42px;
+  font-weight: 500;
+  line-height: 50px;
+}
+
+@media screen and (max-width: 768px) {
+  .typography-h2,
+  .typography-h3 {
+    font-size: 36px;
+    line-height: 43px;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  .typography-h2,
+  .typography-h3 {
+    font-size: 24px;
+    line-height: 29px;
+  }
+}

src/shared/ui/components/Typography/Typography.tsx

@@ -0,0 +1,19 @@
+import "./Typography.scss";
+
+interface ITypographyProps {
+  element: string;
+  children: React.ReactNode;
+}
+
+const Typography: React.FC<ITypographyProps> = ({
+  element,
+  children,
+}: ITypographyProps) => {
+  const headers: Record<string, React.ReactNode> = {
+    h2: <h2 className="typography-h2">{children}</h2>,
+    h3: <h3 className="typography-h3">{children}</h3>,
+  };
+  return headers[element];
+};
+
+export default Typography;

src/shared/ui/variables.scss

@@ -0,0 +1,10 @@
+$light-blue: rgb(72, 159, 225);
+$blue: #0077b6;
+$red-500: rgb(240, 68, 56);
+$light-green: rgb(74, 192, 63);
+
+$gray-300: #d0d5dd;
+$gray-500: #667085;
+$gray-700: #344054;
+$gray-900: rgb(16, 24, 40);
+$black: rgb(50, 48, 58);

src/shared/variables/links.ts

@@ -0,0 +1,7 @@
+export const LINKS = [
+  { id: 1, pagename: "Главная", pathname: "/" },
+  { id: 2, pagename: "О нас", pathname: "/about-us" },
+  { id: 3, pagename: "Статистика", pathname: "/statistics" },
+  { id: 4, pagename: "Новости", pathname: "/news" },
+  { id: 5, pagename: "Волонтеры", pathname: "/volunteers" },
+];

src/shared/variables/report-status.ts

@@ -0,0 +1,11 @@
+export const REPORT_STATUS: Record<number, string> = {
+  1: "В обработке",
+  2: "Одобрен",
+  3: "Запрещен",
+};
+
+export const REPORT_STATUS_COLORS: Record<number, string> = {
+  1: "rgb(255, 172, 51)",
+  2: "rgb(20, 186, 109)",
+  3: "rgb(230, 68, 82)",
+};

src/shared/variables/road-types.ts

@@ -0,0 +1,26 @@
+export const ROAD_TYPES_STATS: Record<number, string> = {
+  1: "Разбитых дорог",
+  2: "Очагов аварийности",
+  3: "Локальных дефектов",
+  4: "В планах ремонта",
+  5: "Отремонтировано",
+  6: "Локальных дефектов исправлено",
+};
+
+export const ROAD_TYPES: Record<number, string> = {
+  1: "Разбитая дорога",
+  2: "Очаг аварийности",
+  3: "Локальный дефект",
+  4: "В планах ремонта",
+  5: "Отремонтировано",
+  6: "Локальный дефект исправлен",
+};
+
+export const ROAD_TYPES_COLORS: Record<number, string> = {
+  1: "rgb(230, 68, 82)",
+  2: "rgb(194, 136, 226)",
+  3: "rgb(135, 40, 157)",
+  4: "rgb(255, 172, 51)",
+  5: "rgb(254, 211, 99)",
+  6: "rgb(143, 222, 106)",
+};