89 lines
2.3 KiB
TypeScript
Executable File
89 lines
2.3 KiB
TypeScript
Executable File
import {Trans} from '@common/i18n/trans';
|
|
import {FormattedRelativeTime} from '@common/i18n/formatted-relative-time';
|
|
import {LockIcon} from '@common/icons/material/Lock';
|
|
import React, {Fragment} from 'react';
|
|
import {LockOpenIcon} from '@common/icons/material/LockOpen';
|
|
import clsx from 'clsx';
|
|
import {Channel} from '@common/channels/channel';
|
|
import {Button} from '@common/ui/buttons/button';
|
|
import {ShareIcon} from '@common/icons/material/Share';
|
|
import {ShareMenuTrigger} from '@app/sharing/share-menu-trigger';
|
|
import {getUserListLink} from '@app/user-lists/user-list-link';
|
|
|
|
interface Props {
|
|
list: Channel;
|
|
className?: string;
|
|
showShareButton?: boolean;
|
|
showVisibility?: boolean;
|
|
}
|
|
export function UserListDetails({
|
|
list,
|
|
className,
|
|
showShareButton,
|
|
showVisibility = true,
|
|
}: Props) {
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
'flex flex-shrink-0 items-center gap-4 whitespace-nowrap text-muted',
|
|
className,
|
|
)}
|
|
>
|
|
{showShareButton && (
|
|
<Fragment>
|
|
<ShareButton list={list} />
|
|
<Divider marginLeft="ml-2" />
|
|
</Fragment>
|
|
)}
|
|
{list.items_count ? (
|
|
<Fragment>
|
|
<Trans message=":count items" values={{count: list.items_count}} />
|
|
<Divider />
|
|
</Fragment>
|
|
) : null}
|
|
<span>
|
|
<Trans
|
|
message="Updated :date"
|
|
values={{
|
|
date: <FormattedRelativeTime date={list.updated_at} />,
|
|
}}
|
|
/>
|
|
</span>
|
|
{showVisibility && (
|
|
<Fragment>
|
|
<Divider />
|
|
{list.public ? <LockOpenIcon size="sm" /> : <LockIcon size="sm" />}
|
|
<div>
|
|
{list.public ? (
|
|
<Trans message="Public" />
|
|
) : (
|
|
<Trans message="Private" />
|
|
)}
|
|
</div>
|
|
</Fragment>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ShareButtonProps {
|
|
list: Channel;
|
|
}
|
|
function ShareButton({list}: ShareButtonProps) {
|
|
const link = getUserListLink(list, {absolute: true});
|
|
return (
|
|
<ShareMenuTrigger link={link}>
|
|
<Button startIcon={<ShareIcon />} sizeClassName="px-10 py-6">
|
|
<Trans message="Share" />
|
|
</Button>
|
|
</ShareMenuTrigger>
|
|
);
|
|
}
|
|
|
|
interface DividerProps {
|
|
marginLeft?: string;
|
|
}
|
|
function Divider({marginLeft = 'ml-12'}: DividerProps) {
|
|
return <div className={clsx('mr-10 h-20 w-1 bg-divider', marginLeft)} />;
|
|
}
|