97 lines
2.9 KiB
TypeScript
Executable File
97 lines
2.9 KiB
TypeScript
Executable File
import {memo, ReactNode} from 'react';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
|
|
import {PersonLink} from '@app/people/person-link';
|
|
import {GroupTitleCredits} from '@app/titles/requests/use-title';
|
|
|
|
interface Props {
|
|
credits: GroupTitleCredits | undefined;
|
|
}
|
|
export const CompactCredits = memo(({credits = {}}: Props) => (
|
|
<div className="mt-16 flex flex-col gap-14 border-t pt-16">
|
|
{credits.creators?.length ? (
|
|
<PeopleDetail label={<Trans message="Created by" />}>
|
|
<BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
|
|
{credits.creators.slice(0, 3).map(creator => (
|
|
<PersonLink
|
|
person={creator}
|
|
key={creator.id}
|
|
color="primary"
|
|
className="whitespace-nowrap"
|
|
/>
|
|
))}
|
|
</BulletSeparatedItems>
|
|
</PeopleDetail>
|
|
) : null}
|
|
{credits.directing?.length ? (
|
|
<PeopleDetail
|
|
label={
|
|
<Trans
|
|
message="[one Director|other Directors]"
|
|
values={{count: credits.directing.length}}
|
|
/>
|
|
}
|
|
>
|
|
<BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
|
|
{credits.directing.slice(0, 3).map(director => (
|
|
<PersonLink
|
|
person={director}
|
|
key={director.id}
|
|
color="primary"
|
|
className="whitespace-nowrap"
|
|
/>
|
|
))}
|
|
</BulletSeparatedItems>
|
|
</PeopleDetail>
|
|
) : null}
|
|
{credits.writing?.length ? (
|
|
<PeopleDetail
|
|
label={
|
|
<Trans
|
|
message="[one Writer|other Writers]"
|
|
values={{count: credits.writing.length}}
|
|
/>
|
|
}
|
|
>
|
|
<BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
|
|
{credits.writing.slice(0, 3).map(writer => (
|
|
<PersonLink
|
|
person={writer}
|
|
key={writer.id}
|
|
color="primary"
|
|
className="whitespace-nowrap"
|
|
/>
|
|
))}
|
|
</BulletSeparatedItems>
|
|
</PeopleDetail>
|
|
) : null}
|
|
{credits.actors?.length ? (
|
|
<PeopleDetail label={<Trans message="Stars" />}>
|
|
<BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
|
|
{credits.actors.slice(0, 3).map(actor => (
|
|
<PersonLink
|
|
person={actor}
|
|
key={actor.id}
|
|
color="primary"
|
|
className="whitespace-nowrap"
|
|
/>
|
|
))}
|
|
</BulletSeparatedItems>
|
|
</PeopleDetail>
|
|
) : null}
|
|
</div>
|
|
));
|
|
|
|
interface PeopleDetailProps {
|
|
label: ReactNode;
|
|
children: ReactNode;
|
|
}
|
|
function PeopleDetail({label, children}: PeopleDetailProps) {
|
|
return (
|
|
<div className="flex-shrink-0 gap-24 md:flex">
|
|
<div className="min-w-84 font-bold">{label}</div>
|
|
<div>{children}</div>
|
|
</div>
|
|
);
|
|
}
|