diff --git a/app/api/config.ts b/app/api/config.ts index 815ec0a..b0fd02d 100644 --- a/app/api/config.ts +++ b/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`, diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx index 3fcac54..50fdd5b 100644 --- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx +++ b/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> diff --git a/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx b/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx new file mode 100644 index 0000000..6a1c72b --- /dev/null +++ b/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> + } + </> + ); +}; diff --git a/app/pages/Release.tsx b/app/pages/Release.tsx index aa6f6c1..e294c5d 100644 --- a/app/pages/Release.tsx +++ b/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]">