112 lines
3.4 KiB
TypeScript
Executable File
112 lines
3.4 KiB
TypeScript
Executable File
import {
|
|
DetailItem,
|
|
TitlePageAsideLayout,
|
|
} from '@app/titles/pages/title-page/title-page-aside-layout';
|
|
import {PersonPoster} from '@app/people/person-poster/person-poster';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {FormattedDate} from '@common/i18n/formatted-date';
|
|
import React from 'react';
|
|
import {PersonAge} from '@app/people/person-age';
|
|
import {GetPersonResponse} from '@app/people/requests/use-person';
|
|
import {ShareMenuTrigger} from '@app/sharing/share-menu-trigger';
|
|
import {Button} from '@common/ui/buttons/button';
|
|
import {ShareIcon} from '@common/icons/material/Share';
|
|
import {Person} from '@app/titles/models/person';
|
|
import {getPersonLink} from '@app/people/person-link';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {Link} from 'react-router-dom';
|
|
import {EditIcon} from '@common/icons/material/Edit';
|
|
import {useAuth} from '@common/auth/use-auth';
|
|
|
|
interface Props {
|
|
data: GetPersonResponse;
|
|
}
|
|
export function PersonPageAside({data: {person, total_credits_count}}: Props) {
|
|
const {hasPermission} = useAuth();
|
|
const age = (
|
|
<Trans
|
|
message=":count years old"
|
|
values={{count: <PersonAge person={person} />}}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<TitlePageAsideLayout
|
|
className="max-md:flex"
|
|
poster={
|
|
<div>
|
|
<div className="relative">
|
|
<PersonPoster person={person} size="w-140 md:w-full" srcSize="lg" />
|
|
{hasPermission('titles.update') && (
|
|
<IconButton
|
|
elementType={Link}
|
|
to={`/admin/people/${person.id}/edit`}
|
|
className="absolute bottom-6 right-4"
|
|
color="white"
|
|
>
|
|
<EditIcon />
|
|
</IconButton>
|
|
)}
|
|
</div>
|
|
<ShareButton person={person} />
|
|
</div>
|
|
}
|
|
>
|
|
<dl className="mt-12 md:mt-24">
|
|
{person.known_for && (
|
|
<DetailItem label={<Trans message="Known for" />}>
|
|
<Trans message={person.known_for} />
|
|
</DetailItem>
|
|
)}
|
|
{person.gender && (
|
|
<DetailItem label={<Trans message="Gender" />}>
|
|
<span className="capitalize">
|
|
<Trans message={person.gender} />
|
|
</span>
|
|
</DetailItem>
|
|
)}
|
|
{total_credits_count ? (
|
|
<DetailItem label={<Trans message="Known credits" />}>
|
|
{total_credits_count}
|
|
</DetailItem>
|
|
) : null}
|
|
{person.birth_date ? (
|
|
<DetailItem label={<Trans message="Born" />}>
|
|
<FormattedDate date={person.birth_date} />{' '}
|
|
{!person.death_date && age}
|
|
</DetailItem>
|
|
) : null}
|
|
{person.birth_place ? (
|
|
<DetailItem label={<Trans message="Birthplace" />}>
|
|
{person.birth_place}
|
|
</DetailItem>
|
|
) : null}
|
|
{person.death_date ? (
|
|
<DetailItem label={<Trans message="Died" />}>
|
|
<FormattedDate date={person.death_date} /> ({age})
|
|
</DetailItem>
|
|
) : null}
|
|
</dl>
|
|
</TitlePageAsideLayout>
|
|
);
|
|
}
|
|
|
|
interface ShareButtonProps {
|
|
person: Person;
|
|
}
|
|
function ShareButton({person}: ShareButtonProps) {
|
|
const link = getPersonLink(person, {absolute: true});
|
|
return (
|
|
<ShareMenuTrigger link={link}>
|
|
<Button
|
|
variant="outline"
|
|
color="primary"
|
|
startIcon={<ShareIcon />}
|
|
className="mt-14 md:min-h-40 md:w-full"
|
|
>
|
|
<Trans message="Share" />
|
|
</Button>
|
|
</ShareMenuTrigger>
|
|
);
|
|
}
|