refactor: update style of Related Releases Card on Release page

app/components/ReleaseLink/ReleaseLink.16_9Poster_old.tsx

@@ -21,7 +21,7 @@ export const ReleaseLink169Poster = (props: any) => {
   }
   return (
     <Link
-      href={`/release/${props.id}`}
+      href={`/release/${props.id}`} 
       className={props.isLinkDisabled ? "pointer-events-none" : ""}
       aria-disabled={props.isLinkDisabled}
       tabIndex={props.isLinkDisabled ? -1 : undefined}

app/components/ReleaseLink/ReleaseLink.tsx

@@ -1,22 +1,52 @@
-import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
-import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
-import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
+import Link from "next/link";
+import { Poster } from "../ReleasePoster/Poster";
+import { Chip } from "../Chip/Chip";
+// import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
+// import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
+// import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
 
-export const ReleaseLink = (props: { type?: "16_9" | "poster" }) => {
-  const type = props.type || "16_9";
-
-  if (type == "16_9") {
-    return (
-      <>
-        <div>TYPE=16/9</div>
-
-        {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
-        {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
-      </>
-    );
-  }
-  if (type == "poster") {
-    return <div>TYPE=POSTER</div>;
-    // return <ReleaseLinkPoster {...props} />;
-  }
+const profile_lists = {
+  // 0: "Не смотрю",
+  1: { name: "Смотрю", bg_color: "bg-green-500" },
+  2: { name: "В планах", bg_color: "bg-purple-500" },
+  3: { name: "Просмотрено", bg_color: "bg-blue-500" },
+  4: { name: "Отложено", bg_color: "bg-yellow-500" },
+  5: { name: "Брошено", bg_color: "bg-red-500" },
+};
+
+export const ReleaseLink = (props: {
+  // type?: "16_9" | "poster";
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  // const type = props.type || "16_9";
+
+  // if (type == "16_9") {
+  //   return (
+  //     <>
+  //       <div>TYPE=16/9</div>
+
+  //       {/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
+  //       {/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
+  //     </>
+  //   );
+  // }
+  // if (props.type == "poster") {
+  return (
+    <>You NEED to fix this. Replace import to `ReleaseLinkUpdate`</>
+  );
+  // return <ReleaseLinkPoster {...props} />;
+  // }
 };

app/components/ReleaseLink/ReleaseLinkUpdate.tsx

@@ -0,0 +1,25 @@
+import Link from "next/link";
+import { PosterWithStuff } from "../ReleasePoster/PosterWithStuff";
+
+export const ReleaseLink = (props: {
+  image: string;
+  title_ru: string;
+  title_original: string;
+  genres?: string;
+  grade?: number;
+  id: number;
+  settings?: {
+    showGenres?: boolean;
+  };
+  profile_list_status?: number;
+  status?: {
+    name: string;
+  };
+  status_id?: number;
+}) => {
+  return (
+    <Link href={`/release/${props.id}`}>
+      <PosterWithStuff {...props} />
+    </Link>
+  );
+};