feat(ReleaseOverview): add ability to change view modes for releases pages

TODO.md

@@ -8,6 +8,5 @@
 
 ## Идеи
 
-- Изменение вида списка релизов
 - уведомления
 - метатеги

frontend/app/components/CardList/CardList.jsx

@@ -1,7 +1,9 @@
 import { ReleaseCard } from "@/app/components/ReleaseCard/ReleaseCard";
+import { ReleaseList } from "@/app/components/ReleaseList/ReleaseList";
 
 export const CardList = (props) => {
   return props.data.map((item) => {
+    if (props.view == "grid") {
       return (
         <ReleaseCard
           key={item.id}
@@ -11,5 +13,17 @@ export const CardList = (props) => {
           description={item.description}
         />
       );
+    }
+    if (props.view == "list") {
+      return (
+        <ReleaseList
+          key={item.id}
+          id={item.id}
+          title={item.title_ru}
+          poster={item.image}
+          description={item.description}
+        />
+      );
+    }
   });
 };

frontend/app/components/NavigationRail/NavigationRail.jsx

@@ -105,7 +105,7 @@ export const NavigationRail = (props) => {
 
       <button className="circle transparent" onClick={() => copyToClipboard()}>
         <i>{isCopied ? "done" : "content_copy"}</i>
-        <div class="tooltip right">
+        <div className="tooltip right">
           {isCopied ? "Ссылка скопирована" : "Скопировать ссылку"}
         </div>
       </button>

frontend/app/components/ReleaseList/ReleaseList.jsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import Image from "next/legacy/image";
+
+export const ReleaseList = (props) => {
+  return (
+    <Link
+      href={`/release/${props.id}`}
+      className={
+        props.className
+          ? props.className
+          : "s12 round fill row padding surface-container"
+      }
+    >
+      <Image
+        className="round"
+        style={{ aspectRatio: "1/1" }}
+        width="128px"
+        height="128px"
+        src={props.poster}
+        alt=""
+      />
+
+      <div className="max">
+        <h5 className="small">{`${props.title.substring(0, 90)}${
+          [...props.title].length > 90 ? "..." : ""
+        }`}</h5>
+        <p>{`${props.description.substring(0, 170)}${
+          [...props.description].length > 170 ? "..." : ""
+        }`}</p>
+      </div>
+    </Link>
+  );
+};

frontend/app/components/ReleasesOverview/ReleasesOverview.jsx

@@ -1,8 +1,12 @@
 import { CardList } from "@/app/components/CardList/CardList";
+import { useState } from "react";
 
 export default function ReleasesOverview(props) {
+  const [view, setView] = useState("grid");
+
   return (
     <>
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
         {props.chips && (
           <div>
             {props.chips.map((item) => {
@@ -21,10 +25,30 @@ export default function ReleasesOverview(props) {
           </div>
         )}
 
+        <div>
+          <button
+            className="circle transparent"
+            onClick={() => {
+              setView("list");
+            }}
+          >
+            <i className={view == "list" ? "fill" : ""}>view_agenda</i>
+          </button>
+          <button
+            className="circle transparent"
+            onClick={() => {
+              setView("grid");
+            }}
+          >
+            <i className={view == "grid" ? "fill" : ""}>cards</i>
+          </button>
+        </div>
+      </div>
+
       {props.releases ? (
         <>
           <div className="grid">
-            <CardList data={props.releases} />
+            <CardList data={props.releases} view={view} />
           </div>
 
           {props.isNextPage && (