renamed folders

src/entities/NewsCard/NewsCard.scss

@@ -0,0 +1,53 @@
+@import "../../shared/ui/variables.scss";
+
+.news-card {
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 24px;
+  img {
+    width: 100%;
+    height: 160px;
+    min-height: 160px;
+    max-height: 160px;
+    object-fit: cover;
+  }
+
+  &__date {
+    width: fit-content;
+    padding: 8px 12px;
+    background-color: $light-blue;
+    font-size: 14px;
+    font-weight: 500;
+    color: white;
+    border-radius: 3px;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 20px;
+    h4 {
+      font-size: 24px;
+      font-weight: 500;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 150%;
+    }
+  }
+
+  &__more-btn {
+    width: fit-content;
+    padding: 8px 12px;
+    border: 2px solid #3b3b3b;
+    border-radius: 3px;
+    color: #3b3b3b;
+    font-weight: 600;
+  }
+}

src/entities/NewsCard/NewsCard.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import Image, { StaticImageData } from "next/image";
+import "./NewsCard.scss";
+import Link from "next/link";
+
+interface INewsCard {
+  id: number;
+  image: StaticImageData | string;
+  title: string;
+  description: string;
+  date: string;
+}
+
+const NewsCard: React.FC<INewsCard> = ({
+  id,
+  image,
+  title,
+  description,
+  date,
+}: INewsCard) => {
+  const sliceTitle = (title: string) => {
+    if (title.length > 35) {
+      return `${title.slice(0, 35)}...`;
+    }
+
+    return title;
+  };
+  const sliceDate = (date: string) => {
+    return `${date.slice(8, 10)}/${date.slice(5, 7)}/${date.slice(
+      0,
+      4
+    )}`;
+  };
+
+  const sliceDescription = (description: string) => {
+    if (description.length > 65) {
+      return `${description.slice(0, 65)}...`;
+    }
+
+    return description;
+  };
+  return (
+    <div className="news-card">
+      <Image
+        src={image}
+        alt="Card Image"
+        width={250}
+        height={160}
+        blurDataURL="blur"
+      />
+
+      <div className="news-card__text">
+        <h5 className="news-card__date">{sliceDate(date)}</h5>
+        <h4>{sliceTitle(title)}</h4>
+        <p>{sliceDescription(description)}</p>
+      </div>
+
+      <Link href={`/news/${id}`} className="news-card__more-btn">
+        Подробнее
+      </Link>
+    </div>
+  );
+};
+
+export default NewsCard;

src/entities/RoadType/RoadType.scss

@@ -0,0 +1,8 @@
+.road-type {
+  padding: 4px 12px;
+  width: fit-content;
+  color: white;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 20px;
+}

src/entities/RoadType/RoadType.tsx

@@ -0,0 +1,19 @@
+import "./RoadType.scss";
+
+interface IRoadTypeProps {
+  children: React.ReactNode;
+  color: string;
+}
+
+const RoadType: React.FC<IRoadTypeProps> = ({
+  children,
+  color,
+}: IRoadTypeProps) => {
+  return (
+    <div className="road-type" style={{ backgroundColor: color }}>
+      {children}
+    </div>
+  );
+};
+
+export default RoadType;