From 6406c17de9dc20b5c701b9265e6d7f47687feda2 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Fri, 19 Jul 2024 04:16:02 +0500
Subject: [PATCH] refactor: add Chip to cards

---
 app/components/ReleaseLink/Chip.jsx        |  11 ++
 app/components/ReleaseLink/ReleaseLink.jsx | 114 ++++++++-------------
 2 files changed, 56 insertions(+), 69 deletions(-)
 create mode 100644 app/components/ReleaseLink/Chip.jsx

diff --git a/app/components/ReleaseLink/Chip.jsx b/app/components/ReleaseLink/Chip.jsx
new file mode 100644
index 0000000..282026e
--- /dev/null
+++ b/app/components/ReleaseLink/Chip.jsx
@@ -0,0 +1,11 @@
+export const Chip = (props) => {
+  return (
+    <div className={`rounded-sm ${props.bg_color || "bg-gray-500"}`}>
+      <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
+        {props.name}
+        {props.name && props.devider ? props.devider : " "}
+        {props.name_2}
+      </p>
+    </div>
+  );
+};
diff --git a/app/components/ReleaseLink/ReleaseLink.jsx b/app/components/ReleaseLink/ReleaseLink.jsx
index 91b8517..ff38f74 100644
--- a/app/components/ReleaseLink/ReleaseLink.jsx
+++ b/app/components/ReleaseLink/ReleaseLink.jsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { sinceUnixDate } from "@/app/api/utils";
+import { Chip } from "./Chip";
 
 export const ReleaseLink = (props) => {
   const grade = props.grade.toFixed(1);
@@ -26,88 +27,63 @@ export const ReleaseLink = (props) => {
             src={props.image}
             alt=""
           />
-          <div className="absolute flex flex-wrap items-start justify-start max-w-[45%] gap-0.5 sm:gap-1 left-2 top-2">
-            <div className="flex gap-1 ">
-              <div
-                className={`rounded-sm ${
-                  grade == 0
-                    ? "hidden"
-                    : grade < 2
-                    ? "bg-red-500"
-                    : grade < 3
-                    ? "bg-orange-500"
-                    : grade < 4
-                    ? "bg-yellow-500"
-                    : "bg-green-500"
-                }`}
-              >
-                <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs sm:text-base text-white">
-                  {grade}
-                </p>
-              </div>
-            </div>
+          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
+            <Chip
+              bg_color={
+                grade == 0
+                  ? "hidden"
+                  : grade < 2
+                  ? "bg-red-500"
+                  : grade < 3
+                  ? "bg-orange-500"
+                  : grade < 4
+                  ? "bg-yellow-500"
+                  : "bg-green-500"
+              }
+              name={grade}
+            />
             {user_list && (
-              <div className={`rounded-sm ${user_list.bg_color}`}>
-                <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white">
-                  {user_list.name}
-                </p>
-              </div>
+              <Chip bg_color={user_list.bg_color} name={user_list.name} />
             )}
-          </div>
-          <div className="absolute flex flex-wrap max-w-[45%] justify-end items-end gap-0.5 sm:gap-1 top-2 right-2">
             {props.status ? (
-              <div className="bg-gray-500 rounded-sm">
-                <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white text-center">
-                  {props.status.name}
-                </p>
-              </div>
+              <Chip name={props.status.name} />
             ) : (
-              <div className="bg-gray-500 rounded-sm">
-                <p className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white text-center">
-                  {props.status_id == 1
+              <Chip
+                name={
+                  props.status_id == 1
                     ? "Завершено"
                     : props.status_id == 2
                     ? "Онгоинг"
-                    : "Анонс"}
-                </p>
-              </div>
+                    : "Анонс"
+                }
+              />
+            )}
+            <Chip
+              name={props.episodes_released && props.episodes_released}
+              name_2={
+                props.episodes_total ? props.episodes_total + " эп." : "? эп."
+              }
+              devider="/"
+            />
+            {props.last_view_episode && (
+              <Chip
+                name={
+                  props.last_view_episode.name
+                    ? props.last_view_episode.name
+                    : props.last_view_episode.position + 1
+                }
+                name_2={
+                  "last_view_timestamp" in props &&
+                  sinceUnixDate(props.last_view_timestamp)
+                }
+                devider=", "
+              />
             )}
-            <div className="bg-gray-500 rounded-sm">
-              <div className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white flex">
-                {props.episodes_released && (
-                  <p>{`${props.episodes_released}/`}</p>
-                )}
-                {props.episodes_total ? (
-                  <p>{props.episodes_total} эп.</p>
-                ) : (
-                  <p>? эп.</p>
-                )}
-              </div>
-            </div>
             {props.is_favorite && (
               <div className="flex items-center justify-center bg-pink-500 rounded-sm">
                 <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
               </div>
             )}
-            {props.last_view_episode && (
-              <div className="bg-gray-500 rounded-sm">
-                <div className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white flex">
-                  {props.last_view_episode.name ? (
-                    <p>{`${props.last_view_episode.name}`} </p>
-                  ) : (
-                    <p>{`${props.last_view_episode.position + 1} серия`}</p>
-                  )}
-                </div>
-              </div>
-            )}
-            {"last_view_timestamp" in props &&
-              props.last_view_timestamp != 0 && (
-                <div className="bg-gray-500 rounded-sm">
-                  <div className="px-2 sm:px-4 py-0.5 sm:py-1 text-xs xl:text-base text-white flex">
-                    <p>{sinceUnixDate(props.last_view_timestamp)}</p>
-                  </div>
-                </div>
-              )}
           </div>
           <p className="absolute text-xs text-white xl:text-base lg:text-lg left-2 bottom-2 right-2">
             {props.title_ru}