refactor: update style of Related Releases Card on Release page

app/components/ReleasePoster/Chips.tsx

@@ -0,0 +1,79 @@
+import { Chip } from "../Chip/Chip";
+
+interface ChipProps {
+  settings?: any;
+  grade?: any;
+  status?: any;
+  status_id?: any;
+  user_list?: any;
+  episodes_released?: any;
+  episodes_total?: any;
+  category?: any;
+  is_favorite?: any;
+}
+
+export const ReleaseChips = ({
+  settings,
+  grade,
+  status,
+  status_id,
+  user_list,
+  episodes_released,
+  episodes_total,
+  category,
+  is_favorite,
+}: ChipProps) => {
+  return (
+    <div
+      className={`${settings.chips.enabled ? "flex" : "hidden"} gap-1 flex-wrap`}
+    >
+      {!settings.chips.gradeHidden && grade ?
+        <Chip
+          className="w-12"
+          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}`}
+        />
+      : ""}
+      {!settings.chips.listHidden && user_list && (
+        <Chip bg_color={user_list.bg_color} name={user_list.name} />
+      )}
+      {!settings.chips.statusHidden && status ?
+        <Chip name={status.name} />
+      : status_id != 0 && (
+          <Chip
+            name={
+              status_id == 1 ? "Завершено"
+              : status_id == 2 ?
+                "Онгоинг"
+              : status_id == 3 && "Анонс"
+            }
+          />
+        )
+      }
+      {!settings.chips.episodesHidden && (
+        <Chip
+          name={episodes_released && episodes_released}
+          name_2={episodes_total ? episodes_total + " эп." : "? эп."}
+          devider="/"
+        />
+      )}
+      {!settings.chips.categoryHidden && category && (
+        <Chip name={category.name} />
+      )}
+      {!settings.chips.favHidden && 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>
+      )}
+    </div>
+  );
+};