94a913a41f
* Begin adding show view and refactoring threads to become notes * Progress on design * Progress redesign timeline * Dropdown button, design improvement * Open comment thread edit mode in drawer * Autosave local storage and commentThreadcount * Improve display and fix missing key issue * Remove some hardcoded CSS properties * Create button * Split company show into ui/business + fix eslint * Fix font weight * Begin auto-save on edit mode * Save server-side query result to Apollo cache * Fix save behavior * Refetch timeline after creating note * Rename createCommentThreadWithComment * Improve styling * Revert "Improve styling" This reverts commit 9fbbf2db006e529330edc64f3eb8ff9ecdde6bb0. * Improve CSS styling * Bring back border radius inadvertently removed * padding adjustment * Improve blocknote design * Improve edit mode display * Remove Comments.tsx * Remove irrelevant comment stories * Removed un-necessary panel component * stop using fragment, move trash icon * Add a basic story for CompanyShow * Add a basic People show view * Fix storybook tests * Add very basic Person story * Refactor PR1 * Refactor part 2 * Refactor part 3 * Refactor part 4 * Fix tests --------- Co-authored-by: Charles Bochet <charles@twenty.com>
86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import { Tooltip } from 'react-tooltip';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { v4 as uuidV4 } from 'uuid';
|
|
|
|
import { Avatar } from '@/users/components/Avatar';
|
|
import {
|
|
beautifyExactDate,
|
|
beautifyPastDateRelativeToNow,
|
|
} from '@/utils/datetime/date-utils';
|
|
|
|
const StyledShowPageSummaryCard = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(3)};
|
|
justify-content: center;
|
|
padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
|
|
${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
|
|
`;
|
|
|
|
const StyledInfoContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
const StyledDate = styled.div`
|
|
color: ${({ theme }) => theme.font.color.tertiary};
|
|
cursor: pointer;
|
|
`;
|
|
|
|
const StyledTitle = styled.div`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
font-size: ${({ theme }) => theme.font.size.xl};
|
|
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
|
`;
|
|
|
|
const StyledTooltip = styled(Tooltip)`
|
|
background-color: ${({ theme }) => theme.background.primary};
|
|
box-shadow: ${({ theme }) => theme.boxShadow.light};
|
|
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
|
|
padding: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
export function ShowPageSummaryCard({
|
|
logoOrAvatar,
|
|
title,
|
|
date,
|
|
}: {
|
|
logoOrAvatar?: string;
|
|
title: string;
|
|
date: string;
|
|
}) {
|
|
const beautifiedCreatedAt =
|
|
date !== '' ? beautifyPastDateRelativeToNow(date) : '';
|
|
const exactCreatedAt = date !== '' ? beautifyExactDate(date) : '';
|
|
const theme = useTheme();
|
|
const dateElementId = `date-id-${uuidV4()}`;
|
|
|
|
return (
|
|
<StyledShowPageSummaryCard>
|
|
<Avatar
|
|
avatarUrl={logoOrAvatar}
|
|
size={theme.icon.size.xl}
|
|
placeholder={title}
|
|
/>
|
|
<StyledInfoContainer>
|
|
<StyledTitle>{title}</StyledTitle>
|
|
<StyledDate id={dateElementId}>
|
|
Added {beautifiedCreatedAt} ago
|
|
</StyledDate>
|
|
<StyledTooltip
|
|
anchorSelect={`#${dateElementId}`}
|
|
content={exactCreatedAt}
|
|
clickable
|
|
noArrow
|
|
place="right"
|
|
/>
|
|
</StyledInfoContainer>
|
|
</StyledShowPageSummaryCard>
|
|
);
|
|
}
|