44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { useRecoilState } from 'recoil';
|
|
|
|
import { Activity } from '@/activities/types/Activity';
|
|
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
|
import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
|
|
|
|
const StyledCreationDisplay = styled.span`
|
|
color: ${({ theme }) => theme.font.color.light};
|
|
display: flex;
|
|
font-size: ${({ theme }) => theme.font.size.sm};
|
|
user-select: none;
|
|
width: 100%;
|
|
`;
|
|
|
|
type ActivityCreationDateProps = {
|
|
activityId: string;
|
|
};
|
|
|
|
export const ActivityCreationDate = ({
|
|
activityId,
|
|
}: ActivityCreationDateProps) => {
|
|
const [activityInStore] = useRecoilState(recordStoreFamilyState(activityId));
|
|
const activity = activityInStore as Activity;
|
|
|
|
const beautifiedDate = activity.createdAt
|
|
? beautifyPastDateRelativeToNow(activity.createdAt)
|
|
: null;
|
|
|
|
const authorName = activity.author?.name
|
|
? `${activity.author.name.firstName} ${activity.author.name.lastName}`
|
|
: null;
|
|
|
|
if (!activity.createdAt || !authorName) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<StyledCreationDisplay>
|
|
Created {beautifiedDate} by {authorName}
|
|
</StyledCreationDisplay>
|
|
);
|
|
};
|