Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx

@@ -0,0 +1,62 @@
+import styled from '@emotion/styled';
+
+import { ActivityType } from '@/activities/types/Activity';
+import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
+import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
+
+const StyledTitleContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex-direction: row;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  gap: ${({ theme }) => theme.spacing(2)};
+  line-height: ${({ theme }) => theme.text.lineHeight.lg};
+
+  width: 100%;
+`;
+
+const StyledTitleText = styled.div<{
+  completed?: boolean;
+  hasCheckbox?: boolean;
+}>`
+  text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
+  width: ${({ hasCheckbox, theme }) =>
+    !hasCheckbox ? '100%;' : `calc(100% - ${theme.spacing(5)});`};
+`;
+
+const StyledCheckboxContainer = styled.div<{ hasCheckbox?: boolean }>`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+
+type TimelineActivityTitleProps = {
+  title: string;
+  completed?: boolean;
+  type: ActivityType;
+  onCompletionChange?: (value: boolean) => void;
+};
+
+export const TimelineActivityTitle = ({
+  title,
+  completed,
+  type,
+  onCompletionChange,
+}: TimelineActivityTitleProps) => (
+  <StyledTitleContainer>
+    {type === 'Task' && (
+      <StyledCheckboxContainer
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onCompletionChange?.(!completed);
+        }}
+      >
+        <Checkbox checked={completed ?? false} shape={CheckboxShape.Rounded} />
+      </StyledCheckboxContainer>
+    )}
+    <StyledTitleText completed={completed} hasCheckbox={type === 'Task'}>
+      <OverflowingTextWithTooltip text={title ? title : 'Task title'} />
+    </StyledTitleText>
+  </StyledTitleContainer>
+);