feat: add licensed streaming platforms

app/api/config.ts

@@ -10,6 +10,7 @@ export const ENDPOINTS = {
     info: `${API_PREFIX}/release`,
     episode: `${API_PREFIX}/episode`,
     related: `${API_PREFIX}/related`,
+    licensed: `${API_PREFIX}/release/streaming/platform`,
   },
   user: {
     profile: `${API_PREFIX}/profile`,

app/components/ReleaseInfo/ReleaseInfo.Basics.tsx

@@ -1,8 +1,10 @@
 import { Card, Button } from "flowbite-react";
 import { useState } from "react";
 import Image from "next/image";
+import { ReleaseInfoStreaming } from "./ReleaseInfo.LicensedPlatforms";
 
 export const ReleaseInfoBasics = (props: {
+  release_id: number;
   image: string;
   title: { ru: string; original: string };
   note: string | null;
@@ -52,6 +54,7 @@ export const ReleaseInfoBasics = (props: {
           >
             {isFullDescription ? "Скрыть" : "Показать полностью"}
           </Button>
+          <ReleaseInfoStreaming release_id={props.release_id} />
         </div>
       </div>
     </Card>

app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useEffect, useState } from "react";
+
+export const ReleaseInfoStreaming = (props: { release_id: number }) => {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const _getData = async () => {
+      const response = await fetch(
+        `${ENDPOINTS.release.licensed}/${props.release_id}`
+      );
+      setData(await response.json());
+    };
+    _getData();
+  }, []);
+
+  return (
+    <>
+      {!data ?
+        ""
+      : !(data.content.length > 0) ?
+        ""
+      : <div>
+          <p className="mt-4 mb-1 text-lg">Официальные источники: </p>
+          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
+            {data.content.map((item: any) => {
+              return (
+                <a
+                  href={item.url}
+                  key={`platform_${item.id}`}
+                  className="flex items-center gap-2 px-2 py-1 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
+                >
+                  <img src={item.icon} className="w-6 h-6 rounded-full" />
+                  <p className="text-lg">{item.name}</p>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      }
+    </>
+  );
+};

app/pages/Release.tsx

@@ -61,6 +61,7 @@ export const ReleasePage = (props: any) => {
             }}
             description={data.release.description}
             note={data.release.note}
+            release_id={data.release.id}
           />
         </div>
         <div className="[grid-column:2]">