61 lines
1.5 KiB
TypeScript
Executable File
61 lines
1.5 KiB
TypeScript
Executable File
import {PersonPoster} from '@app/people/person-poster/person-poster';
|
|
import {PersonLink} from '@app/people/person-link';
|
|
import {TitleCredit} from '@app/titles/models/title';
|
|
import clsx from 'clsx';
|
|
import {Fragment} from 'react';
|
|
import {Trans} from '@common/i18n/trans';
|
|
|
|
interface Props {
|
|
credits: TitleCredit[];
|
|
className?: string;
|
|
}
|
|
export function TitleCreditsGrid({credits, className}: Props) {
|
|
if (!credits.length) {
|
|
return (
|
|
<div className="text-muted italic">
|
|
<Trans message="We've no cast information for this title yet." />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={clsx('grid gap-14 md:gap-20 title-credits-grid', className)}
|
|
>
|
|
{credits.map(credit => (
|
|
<div
|
|
key={credit.pivot.id}
|
|
className="flex items-center gap-14 md:gap-20"
|
|
>
|
|
<PersonPoster
|
|
rounded
|
|
person={credit}
|
|
size="w-70 md:w-96"
|
|
srcSize="md"
|
|
/>
|
|
<div className="max-md:text-sm">
|
|
<PersonLink className="block font-bold" person={credit} />
|
|
<div className="text-muted">
|
|
<Description credit={credit} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface DescriptionProps {
|
|
credit: TitleCredit;
|
|
}
|
|
function Description({credit}: DescriptionProps) {
|
|
if (credit.pivot.department === 'actors') {
|
|
return <Fragment>{credit.pivot.character}</Fragment>;
|
|
}
|
|
return (
|
|
<span className="capitalize">
|
|
<Trans message={credit.pivot.job} />
|
|
</span>
|
|
);
|
|
}
|