87 lines
2.3 KiB
TypeScript
Executable File
87 lines
2.3 KiB
TypeScript
Executable File
import {Title} from '@app/titles/models/title';
|
|
import {TitlePoster} from '@app/titles/title-poster/title-poster';
|
|
import {TitleRating} from '@app/reviews/title-rating';
|
|
import {TitleLink} from '@app/titles/title-link';
|
|
import {ReactNode} from 'react';
|
|
import {TitleBackdrop} from '@app/titles/title-poster/title-backdrop';
|
|
import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
|
|
import {FormattedDate} from '@common/i18n/formatted-date';
|
|
|
|
export interface TitlePortraitGridItemProps {
|
|
item: Title;
|
|
rating?: number;
|
|
description?: ReactNode;
|
|
}
|
|
export function TitlePortraitGridItem({
|
|
item,
|
|
rating,
|
|
description,
|
|
}: TitlePortraitGridItemProps) {
|
|
return (
|
|
<div>
|
|
<div className="relative">
|
|
<TitlePoster title={item} srcSize="md" showPlayButton />
|
|
</div>
|
|
<div className="mt-10 text-sm">
|
|
<RatingOrReleaseDate title={item} rating={rating} className="mb-4" />
|
|
<TitleLink title={item} className="block text-base font-medium" />
|
|
{description ? <div className="mt-4">{description}</div> : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function TitleLandscapeGridItem({item}: TitlePortraitGridItemProps) {
|
|
return (
|
|
<div>
|
|
<TitleBackdrop
|
|
title={item}
|
|
srcSize="lg"
|
|
size="w-full"
|
|
className="rounded"
|
|
wrapWithLink
|
|
showPlayButton
|
|
/>
|
|
<div className="mt-10 text-sm">
|
|
<TitleLink
|
|
title={item}
|
|
className="mb-4 block text-base font-semibold"
|
|
/>
|
|
<BulletSeparatedItems className="mb-4">
|
|
{item.release_date && <FormattedDate date={item.release_date} />}
|
|
{item.certification && (
|
|
<div className="uppercase">{item.certification}</div>
|
|
)}
|
|
</BulletSeparatedItems>
|
|
<TitleRating score={item.rating} className="mb-4" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface RatingOrReleaseDateProps {
|
|
title: Title;
|
|
rating?: number;
|
|
className?: string;
|
|
}
|
|
function RatingOrReleaseDate({
|
|
title,
|
|
rating,
|
|
className,
|
|
}: RatingOrReleaseDateProps) {
|
|
if (!rating) {
|
|
rating = title.rating;
|
|
}
|
|
if (rating) {
|
|
return <TitleRating score={rating} className={className} />;
|
|
}
|
|
if (title.release_date) {
|
|
return (
|
|
<div className={className}>
|
|
<FormattedDate date={title.release_date} />
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}
|