anix/feat: add new stats

anix/fix: search links from release page

app/components/Profile/Profile.Stats.tsx

@@ -3,12 +3,21 @@ import Link from "next/link";
 import ApexCharts from "apexcharts";
 import { useEffect } from "react";
 import { minutesToTime } from "#/api/utils";
+import { ReleaseInfoSearchLink } from "../ReleaseInfo/ReleaseInfo.SearchLink";
+
+type preferredItem = {
+  name: string;
+  percentage: number;
+};
 
 export const ProfileStats = (props: {
   lists: Array<number>;
   watched_count: number;
   watched_time: number;
-  profile_id: number
+  profile_id: number;
+  preferred_genres: Array<preferredItem>;
+  preferred_audiences: Array<preferredItem>;
+  preferred_themes: Array<preferredItem>;
 }) => {
   const getChartOptions = () => {
     return {
@@ -81,41 +90,95 @@ export const ProfileStats = (props: {
       </div>
       <div className="flex items-center">
         <div>
-          <p className="align-center whitespace-nowrap">
-            <span className="inline-block rounded w-4 h-4 bg-[#66bb6c]"></span>{" "}
-            Смотрю <span className="font-bold">{props.lists[0]}</span>
-          </p>
-          <p className="align-center whitespace-nowrap">
-            <span className="inline-block rounded w-4 h-4 bg-[#b566bb]"></span>{" "}
-            В планах <span className="font-bold">{props.lists[1]}</span>
-          </p>
-          <p className="align-center whitespace-nowrap">
-            <span className="inline-block rounded w-4 h-4 bg-[#5c6cc0]"></span>{" "}
-            Просмотрено <span className="font-bold">{props.lists[2]}</span>
-          </p>
-          <p className="align-center whitespace-nowrap">
-            <span className="inline-block rounded w-4 h-4 bg-[#ffca28]"></span>{" "}
-            Отложено <span className="font-bold">{props.lists[3]}</span>
-          </p>
-          <p className="align-center whitespace-nowrap">
-            <span className="inline-block rounded w-4 h-4 bg-[#ef5450]"></span>{" "}
-            Брошено <span className="font-bold">{props.lists[4]}</span>
-          </p>
+          <div className="grid grid-cols-2 gap-y-2 gap-x-4">
+            <p className="align-center whitespace-nowrap">
+              <span className="inline-block rounded w-4 h-4 bg-[#66bb6c]"></span>{" "}
+              Смотрю <span className="font-bold">{props.lists[0]}</span>
+            </p>
+            <p className="align-center whitespace-nowrap">
+              <span className="inline-block rounded w-4 h-4 bg-[#b566bb]"></span>{" "}
+              В планах <span className="font-bold">{props.lists[1]}</span>
+            </p>
+            <p className="align-center whitespace-nowrap">
+              <span className="inline-block rounded w-4 h-4 bg-[#5c6cc0]"></span>{" "}
+              Просмотрено <span className="font-bold">{props.lists[2]}</span>
+            </p>
+            <p className="align-center whitespace-nowrap">
+              <span className="inline-block rounded w-4 h-4 bg-[#ffca28]"></span>{" "}
+              Отложено <span className="font-bold">{props.lists[3]}</span>
+            </p>
+            <p className="align-center whitespace-nowrap">
+              <span className="inline-block rounded w-4 h-4 bg-[#ef5450]"></span>{" "}
+              Брошено <span className="font-bold">{props.lists[4]}</span>
+            </p>
+          </div>
+          <div className="mt-4">
+            <p>
+              Жанры:{" "}
+              <span>
+                {props.preferred_genres.map((item, index) => {
+                  return (
+                    <div key={`preferred-genres-${item.name}`} className="inline">
+                      {index > 0 && ", "}
+                      <ReleaseInfoSearchLink
+                        title={item.name}
+                        searchBy={"tag"}
+                      />{" "}
+                      <span className="text-sm text-gray-700 dark:text-gray-300">{item.percentage}%</span>
+                    </div>
+                  );
+                })}
+              </span>
+            </p>
+            <p>
+              Аудитория:{" "}
+              <span>
+                {props.preferred_audiences.map((item, index) => {
+                  return (
+                    <div key={`preferred-audiences-${item.name}`} className="inline">
+                      {index > 0 && ", "}
+                      <ReleaseInfoSearchLink
+                        title={item.name}
+                        searchBy={"tag"}
+                      />{" "}
+                      <span className="text-sm text-gray-700 dark:text-gray-300">{item.percentage}%</span>
+                    </div>
+                  );
+                })}
+              </span>
+            </p>
+            <p>
+              Тематика:{" "}
+              <span>
+                {props.preferred_themes.map((item, index) => {
+                  return (
+                    <div key={`preferred-themes-${item.name}`} className="inline">
+                      {index > 0 && ", "}
+                      <ReleaseInfoSearchLink
+                        title={item.name}
+                        searchBy={"tag"}
+                      />{" "}
+                      <span className="text-sm text-gray-700 dark:text-gray-300">{item.percentage}%</span>
+                    </div>
+                  );
+                })}
+              </span>
+            </p>
+
+            <p>
+              Просмотрено серий:{" "}
+              <span className="font-bold">{props.watched_count}</span>
+            </p>
+            <p>
+              Время просмотра:{" "}
+              <span className="font-bold">
+                ~{minutesToTime(props.watched_time)}
+              </span>
+            </p>
+          </div>
         </div>
         <div id="donut-chart"></div>
       </div>
-      <div>
-        <p>
-          Просмотрено серий:{" "}
-          <span className="font-bold">{props.watched_count}</span>
-        </p>
-        <p>
-          Время просмотра:{" "}
-          <span className="font-bold">
-            ~{minutesToTime(props.watched_time)}
-          </span>
-        </p>
-      </div>
     </Card>
   );
 };

app/components/ReleaseInfo/ReleaseInfo.SearchLink.tsx

@@ -1,19 +1,11 @@
 import Link from "next/link";
 
-// const searchBy = {
-//   title:  0,
-//   studio:  1,
-//   director:  2,
-//   author:  3,
-//   genre:  4
-// }
-
 // TODO: сделать какую-нибудь анимацию на ссылке при наведении и фокусе
-export const ReleaseInfoSearchLink = (props: { title: string, searchBy: string | number | null }) => {
+export const ReleaseInfoSearchLink = (props: { title: string, searchBy: string }) => {
   return (
     <Link
-      className="underline"
-      href={`/search?q=${props.title}&searchBy=${props.searchBy}`}
+      className="text-gray-700 transition-colors duration-300 hover:text-black dark:text-gray-300 hover:dark:text-white"
+      href={`/search?query=${props.title}&params={"where"%3A"releases"%2C"searchBy"%3A"${props.searchBy}"}`}
     >
       {props.title}
     </Link>

app/pages/Profile.tsx

@@ -164,6 +164,9 @@ export const ProfilePage = (props: any) => {
                 watched_count={user.watched_episode_count}
                 watched_time={user.watched_time}
                 profile_id={user.id}
+                preferred_genres={user.preferred_genres || []}
+                preferred_audiences={user.preferred_audiences || []}
+                preferred_themes={user.preferred_themes || []}
               />
               <ProfileWatchDynamic watchDynamic={user.watch_dynamics || []} />
               <div className="flex flex-col gap-2 lg:hidden">