renamed folders

src/app/news/[id]/page.tsx

@@ -0,0 +1,75 @@
+import Typography from "@/shared/ui/components/Typography/Typography";
+import "./NewsDetails.scss";
+import { apiInstance } from "@/shared/config/apiConfig";
+import { INews } from "@/shared/types/news-type";
+import Image from "next/image";
+import message from "./icons/message.svg";
+import calendar from "./icons/calendar.svg";
+import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
+
+const NewsDetails = async ({
+  params,
+}: {
+  params: { id: string };
+}) => {
+  const getNewsById = async () => {
+    const response = await apiInstance.get<INews>(
+      `/news/${params.id}/`
+    );
+
+    return response.data;
+  };
+
+  const data = await getNewsById();
+
+  const months: Record<string, string> = {
+    "01": "Январь",
+    "02": "Февраль",
+    "03": "Март",
+    "04": "Апрель",
+    "05": "Май",
+    "06": "Июнь",
+    "07": "Июль",
+    "08": "Август",
+    "09": "Сентябрь",
+    "10": "Октябрь",
+    "11": "Ноябрь",
+    "12": "Декабрь",
+  };
+
+  return (
+    <div className="news-details page-padding">
+      <Typography element="h2">{data.title}</Typography>
+
+      <div className="news-details__img">
+        <img id="news-img" src={data.image} alt="News Image" />
+        <div className="news-details__date-and-reviews">
+          <div className="news-details__date">
+            <Image src={calendar} alt="Calendar Icon" />
+            <p>
+              {months[data.created_at.slice(5, 7)]}{" "}
+              {data.created_at.slice(5, 7).slice(0, 1) === "0"
+                ? data.created_at.slice(6, 7)
+                : data.created_at.slice(5, 7)}
+              , {data.created_at.slice(0, 4)}
+            </p>
+          </div>
+
+          <div className="news-details__reviews">
+            <Image src={message} alt="Message Icon" />
+            <p>Комментарии: {data.count_reviews}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="news-details__text">
+        <h3>{data.title}</h3>
+        <p>{data.description}</p>
+      </div>
+
+      <ReviewSection endpoint="news" id={data.id} />
+    </div>
+  );
+};
+
+export default NewsDetails;