init

worklenz-frontend/src/features/projects/singleProject/phase/PhaseHeader.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelectedProject } from '../../../../hooks/useSelectedProject';
+import { useAppSelector } from '../../../../hooks/useAppSelector';
+import { Flex } from 'antd';
+import ConfigPhaseButton from './ConfigPhaseButton';
+import { colors } from '../../../../styles/colors';
+import { useTranslation } from 'react-i18next';
+
+const PhaseHeader = () => {
+  // localization
+  const { t } = useTranslation('task-list-filters');
+
+  // get selected project for useSelectedProject hook
+  const selectedProject = useSelectedProject();
+
+  // get phase data from redux
+  const phaseList = useAppSelector(state => state.phaseReducer.phaseList);
+
+  //get phases details from phases slice
+  const phase = phaseList.find(el => el.projectId === selectedProject?.projectId);
+
+  return (
+    <Flex align="center" justify="space-between">
+      {phase?.phase || t('phasesText')}
+      <ConfigPhaseButton color={colors.darkGray} />
+    </Flex>
+  );
+};
+
+export default PhaseHeader;