40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { queryOMDb } from "@/api/omdb";
|
|
import { INextJsProps } from "../Search/page";
|
|
import ImgCard from "@/common/components/ImgCard";
|
|
import { stringifyQueryParams } from "@/common/utils/searchParams";
|
|
|
|
export default async function Movie({ searchParams }: INextJsProps) {
|
|
const movie = await queryOMDb(stringifyQueryParams(searchParams!));
|
|
const { Poster, Title, Ratings, ...details } = movie;
|
|
return (
|
|
<div className="rounded p-4 bg-gray-300 w-auto mx-4 flex-column h-xl">
|
|
<ImgCard
|
|
width={400}
|
|
height={580}
|
|
src={Poster !== "N/A" ? Poster : ""}
|
|
alt={`${details.Title} Movie Poster`}
|
|
>
|
|
<div className="mt-auto">
|
|
<h3 className="mb-2 text-lg font-semibold">{Title}</h3>
|
|
{Object.entries(details).map(([key, value]) => {
|
|
return (
|
|
<p key={key} className="mb-2 text-sm text-gray-700">
|
|
<strong>{key}: </strong>
|
|
{value as string}
|
|
</p>
|
|
);
|
|
})}
|
|
<h3>Ratings:</h3>
|
|
<ul>
|
|
{Ratings.map((r: { Source: string; Value: string }) => (
|
|
<li key={r.Source}>
|
|
{r.Source} - {r.Value}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</ImgCard>
|
|
</div>
|
|
);
|
|
}
|