57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
"use client";
|
|
import { GetAnimeBySlugResponse } from "../../actions/getAnimeBySlug";
|
|
import GenreTags from "@/shared/components/GenreTags";
|
|
|
|
const AnimeInformationClient = ({ data }: { data: GetAnimeBySlugResponse }) => {
|
|
return (
|
|
<section className="flex gap-4">
|
|
<div>
|
|
<img
|
|
src={data.data.pictureMedium}
|
|
alt={data.data.title}
|
|
className="h-fit w-78 overflow-hidden rounded-lg"
|
|
/>
|
|
</div>
|
|
<div className="tracking-tight">
|
|
<div className="flex flex-col gap-0.5">
|
|
<h1 className="tracking-tighter text-5xl font-bold">
|
|
{data.data.title}
|
|
</h1>
|
|
<h3 className="ml-0.5 tracking-tight text-xl font-medium text-muted-foreground">
|
|
{data.data.titleAlternative[0].title}
|
|
</h3>
|
|
</div>
|
|
<div className="mt-2">
|
|
<GenreTags genres={data.data.genres} />
|
|
</div>
|
|
<table>
|
|
<tbody>
|
|
<tr className="">
|
|
<td className="font-medium text-sm text-muted-foreground">
|
|
Score
|
|
</td>
|
|
<td className="text-sm">{data.data.score}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="font-medium text-sm text-muted-foreground">
|
|
Status
|
|
</td>
|
|
<td className="text-sm">{data.data.status}</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="font-medium text-sm text-muted-foreground">
|
|
Airing
|
|
</td>
|
|
<td className="text-sm">
|
|
{data.data.startAiring} - {data.data.endAiring}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AnimeInformationClient;
|