feat: add view of release name, description, image, author, releases in lists and releases in collection

app/components/CollectionInfo/CollectionInfo.Basics.tsx

@@ -0,0 +1,47 @@
+import { Card, Button, Avatar } from "flowbite-react";
+import { useState } from "react";
+import { unixToDate } from "#/api/utils";
+import Link from "next/link";
+
+export const CollectionInfoBasics = (props: {
+  image: string;
+  title: string;
+  description: string;
+  authorAvatar: string;
+  authorLogin: string;
+  authorId: number;
+  creationDate: number;
+  updateDate: number;
+}) => {
+  return (
+    <Card className="w-full max-w-full lg:max-w-[50%]">
+      <div className="flex flex-col items-end justify-between sm:items-center sm:flex-row">
+        <div className="flex flex-col gap-1">
+          <p>создана: {unixToDate(props.creationDate, "full")}</p>
+          <p>обновлена: {unixToDate(props.updateDate, "full")}</p>
+        </div>
+        <Link href={`/profile/${props.authorId}`}>
+          <Avatar
+            img={props.authorAvatar}
+            rounded={true}
+            bordered={true}
+            size="md"
+            className="flex-row-reverse gap-2"
+          >
+            <div className="font-medium dark:text-white">
+              <div className="text-lg">{props.authorLogin}</div>
+              <div className="text-right text-gray-500">Автор</div>
+            </div>
+          </Avatar>
+        </Link>
+      </div>
+      <div className="min-w-full aspect-video">
+        <img src={props.image} className="w-full rounded-lg" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <p className="text-xl font-bold">{props.title}</p>
+        <p className="whitespace-pre-wrap">{props.description}</p>
+      </div>
+    </Card>
+  );
+};

app/components/CollectionInfo/CollectionInfoLists.tsx

@@ -0,0 +1,58 @@
+import { Card } from "flowbite-react";
+
+export const CollectionInfoLists = (props: {
+  completed: number;
+  planned: number;
+  abandoned: number;
+  delayed: number;
+  watching: number;
+  total: number;
+}) => {
+  return (
+    <Card className="w-full max-w-full lg:max-w-[48%] h-fit ">
+      <div
+        className="flex w-full h-8 overflow-hidden rounded-md"
+        style={
+          {
+            "--width-of-one": "5",
+            "--watching-percent": `calc(var(--width-of-one) * (${props.watching} / ${props.total} * 100%))`,
+            "--planned-percent": `calc(var(--width-of-one) * (${props.planned} / ${props.total} * 100%))`,
+            "--watched-percent": `calc(var(--width-of-one) * (${props.completed} / ${props.total} * 100%))`,
+            "--delayed-percent": `calc(var(--width-of-one) * (${props.delayed} / ${props.total} * 100%))`,
+            "--abandoned-percent": `calc(var(--width-of-one) * (${props.abandoned} / ${props.total} * 100%))`,
+            "--no-list-percent": `calc(var(--width-of-one) * (${props.total - (props.watching - props.planned - props.completed - props.delayed - props.abandoned)} / ${props.total} * 100%))`,
+          } as React.CSSProperties
+        }
+      >
+        <div className={`bg-green-500 w-[var(--watching-percent)]`}></div>
+        <div className={`bg-purple-500 w-[var(--planned-percent)]`}></div>
+        <div className={`bg-blue-500 w-[var(--watched-percent)]`}></div>
+        <div className={`bg-yellow-300 w-[var(--delayed-percent)]`}></div>
+        <div className={`bg-red-500 w-[var(--abandoned-percent)]`}></div>
+        <div className={`bg-gray-400 w-[var(--no-list-percent)]`}></div>
+      </div>
+      <div className="flex flex-wrap w-full gap-4">
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-green-500 rounded-sm"></span>
+          Смотрю <span className="font-bold">{props.watching}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-purple-500 rounded-sm"></span>
+          В планах <span className="font-bold">{props.planned}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-blue-500 rounded-sm"></span>
+          Просмотрено <span className="font-bold">{props.completed}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-yellow-300 rounded-sm"></span>
+          Отложено <span className="font-bold">{props.delayed}</span>
+        </p>
+        <p>
+          <span className="inline-block w-3 h-3 mr-2 bg-red-500 rounded-sm"></span>
+          Брошено <span className="font-bold">{props.abandoned}</span>
+        </p>
+      </div>
+    </Card>
+  );
+};